1, Requirement description

1. You can enter tasks in the top taskbar to create to-do items;
2. The middle part is the display task, which is divided into completed tasks and unfinished tasks;
3. Whether to select all and the number of completed tasks can be seen below, and all completed tasks can be cleared;
4. At present, there are html and css codes of the page, which are required to complete the interactive function.

2, Component analysis

3, Data display function

1. Since each component of the data in the List needs to operate, the data is saved in app Vue. At the same time, considering that the data has attributes such as id, name and completion, the data is stored by wrapping the object in an array.

   todos:[
           {id:'001',title:'having dinner',checked:true},
           {id:'002',title:'sleep',checked:false},
           {id:'003',title:'study',checked:true},
           {id:'004',title:'Beat beans',checked:false},
         ]
   

2. To transfer data to MyList and MyItem, MyList should be array data and MyItem should be single data.

   //MyList.vue
   <MyItem v-for="todo in this.todos" :key="todo.id" :todo="todo"/>
   
   
   //MyItem.vue
   <label>
       <input type="checkbox" :checked="todo.checked"/>                  //Complete
       <span>{{todo.title}}</span>                                       //entry name
   </label>
   

3. The reason why "click or not" adopts: checked="todo.checked" is that: checked should be followed by Boolean value. If: is added, the double quotation marks will be regarded as expressions for calculation, and the checked value in the data is Boolean value.

4, Add task function

1. Keyboard function, enter to achieve: @ Keyup enter="add".
2. Randomly generated id number: nanoid().

   import {nanoid} from 'nanoid'
   
   const id = nanoid();
   

3. It is known that the parent component uses props to transfer data to the child component. If the child component wants to transfer data to the parent component, the parent needs to give the child a function first, and the child's data is returned to the parent as the parent parameter for operation, which should also be declared with props.
4. You can set that the empty string cannot be written and rewritten.

   if(!e.target.value.trim()) return alert("To do item cannot be blank, please re-enter")

5, Change the selected function

1. Change idea: obtain the selected event id, traverse todos array, modify the event with the same id as the obtained id, and modify the status.
2. JS: forEach() method.

   var numbers = [4, 9, 16, 25];
   var sum = 0
   //Sum
   numbers.forEach((n)=>{             //n is every item traversed
       sum += n
   })
   

3. Do not use v-model to bind display and change events at the same time. If the value passed by props is the value of object type, Vue will not report an error when modifying the properties in the object, but this is not recommended.

6, Delete task function

1. Deletion idea: first delete the display that does not show deletion in the code, then obtain the click id, and filter out the items with the same id in todos.
2. Filter code:

   deleteTodo(id){
         this.todos = this.todos.filter((todo)=>{
           return todo.id !== id
         })
   }
   

3. Ask if you want to confirm the deletion.

   if(confirm('Are you sure to delete?')){
         this.deleteTodo(this.todo.id)
   }

7, Select all function

1. Select all idea: you can use v-model to transfer data in two directions. To modify todos data, you need to use the set() method.

   isAll:{
         get(){
             return this.allItem === this.getItem && this.allItem > 0
         },
         set(value){
             this.clickAll(value)
         }
   }

2. When using v-model, keep in mind that the value bound to v-model cannot be the value passed by props, because props cannot be modified!

8, Clear completed task function

1. Clear idea: filter out all checked=true items.

   clearTodo(){
         this.todos = this.todos.filter((todo)=>{
           return !todo.checked
     })
   }