Building a Todo List App with Vue.js
In this tutorial, we'll build a simple todo list app using Vue.js. We'll cover the basics of creating a Vue.js component, working with data and methods, and using conditional rendering and looping to display and manipulate our todo list.
Setting up the Project
Before we start building our todo list app, let's set up a new Vue.js project. Open your terminal and run the following command:
lua
vue create todo-list
This will create a new Vue.js project called todo-list. Once the project is created, navigate into the project directory and start the development server with the following commands:
bash
cd todo-list
npm run serve
Now that our project is set up, let's start building our todo list app.
Creating a TodoList Component
The first step in building our todo list app is to create a new Vue.js component. Open the src/components directory and create a new file called TodoList.vue. Add the following code to the file:
html
<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TodoList',
data() {
return {
todos: [
{ id: 1, text: 'Buy groceries' },
{ id: 2, text: 'Walk the dog' },
{ id: 3, text: 'Do laundry' }
]
}
}
}
</script>
In this code, we're creating a new Vue.js component called TodoList. We're using the data function to define an array of todos, each with an id and a text property. We're then using v-for to loop through the todos array and render a list of li elements, each with the text property of the corresponding todo.
Adding a Form to Add Todos
Now that we have a basic todo list, let's add a form to allow users to add new todos. Update the TodoList.vue template with the following code:
html
<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
<form @submit.prevent="addTodo">
<label for="new-todo">New Todo:</label>
<input id="new-todo" type="text" v-model="newTodoText">
<button type="submit">Add</button>
</form>
</div>
</template>
<script>
export default {
name: 'TodoList',
data() {
return {
todos: [
{ id: 1, text: 'Buy groceries' },
{ id: 2, text: 'Walk the dog' },
{ id: 3, text: 'Do laundry' }
],
newTodoText: ''
}
},
methods: {
addTodo() {
if (this.newTodoText.trim()) {
this.todos.push({
id: this.todos.length + 1,
text: this.newTodoText.trim()
});
this.newTodoText = '';
}
}
}
}
</script>
In this code, we've added a form to the template with an input field for users to enter their new todo, and a button to add it to the list. We've also added a newTodoText data property to our component, and a addTodo method to our component's methods object.
The v-model directive is used to bind the value of the input field to the newTodoText data property. When the form is submitted, the addTodo method is called. This method checks if the newTodoText property is not empty (after trimming any whitespace), and if it's not empty, it creates a new todo object with an id property that's equal to the length of the todos array plus 1, and a text property that's equal to the value of newTodoText. We then push this new todo object to the todos array, reset newTodoText to an empty string, and the new todo will be added to the list.
Adding Conditional Rendering
Next, let's add some conditional rendering to our app to hide the todo list when there are no todos. Update the TodoList.vue template with the following code:
html
<template>
<div>
<h1>Todo List</h1>
<div v-if="todos.length > 0">
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
<div v-else>No todos</div>
<form @submit.prevent="addTodo">
<label for="new-todo">New Todo:</label>
<input id="new-todo" type="text" v-model="newTodoText">
<button type="submit">Add</button>
</form>
</div>
</template>
<script>
export default {
name: 'TodoList',
data() {
return {
todos: [
{ id: 1, text: 'Buy groceries' },
{ id: 2, text: 'Walk the dog' },
{ id: 3, text: 'Do laundry' }
],
newTodoText: ''
}
},
methods: {
addTodo() {
if (this.newTodoText.trim()) {
this.todos.push({
id: this.todos.length + 1,
text: this.newTodoText.trim()
});
this.newTodoText = '';
}
}
}
}
</script>
In this code, we've added a v-if directive to the div that wraps the todo list. This directive checks if the length of the todos array is greater than 0, and if it is, it renders the todo list. If the length of the todos array is 0, the v-else directive is used to render a message saying "No todos".
Conclusion
In this tutorial, we built a simple todo list app using Vue.js. We covered the basics of creating a Vue.js component, working with data and methods, and using conditional rendering and looping to display and manipulate our todo list. With these concepts, you can create more complex Vue.js apps and build rich, interactive user interfaces.
No comments:
Post a Comment