如何從父母傳遞refrence兒童在VUE JS

Question

我有這樣的代碼

HTML

<div class="col-xs-4"> 
    <h3 class="text-center">Incomplete task</h3> 
     <div class="well" style="max-height: 300px;overflow: auto;"> 
      <ul id="check-list-box" class="list-group checked-list-box"> 

        <li v-for="task in incompleteTasks" class="list-group-item"> 
         <input type="checkbox" name="" @click="addToDone"> 
         {{task.description}} 
        </li> 
       <!-- <li v-for="task in incompleteTasks" v-text="task.description" class="list-group-item"> 
       <input type="checkbox" class="" /></li> --> 
      </ul> 
      <br /> 
     </div> 
</div> 

而且我JS貌似這個

let data = { 
       heading:'Task List', 
       tasks :[ 
         {description: 'GO to store', completed : false}, 
         {description: 'SignUp Page', completed :false }, 
         {description: 'Create New team', completed : false}, 
         {description: 'Add Entity', completed : false}, 
         {description: 'Add WorkFlow', completed : false} 
        ] 
      }; 

new Vue({ 

    el: '#root', 

    data: data, 

    methods: { 
     addToDone() { 

     this.completed = true; 
     console.log(this); 
     }, 
    }, 

    computed: { 

     heading() { 

     return this.heading; 
     }, 

     incompleteTasks() { 

     return this.tasks.filter(task => !task.completed); 
     }, 

     completeTasks() { 

     return this.tasks.filter(task => task.completed); 
     } 
    } 

}) 

的onclick複選框我想將該li的對象的完成屬性切換爲True

我該怎麼做？

感謝

Answer 1

如果你路過的task要在方法修改，這樣的：

<li v-for="task in incompleteTasks" class="list-group-item"> 
    <input type="checkbox" name="" @click="addToDone(task)"> 
        {{task.description}} 
</li> 

，並在該方法中，馬克它做，如：

methods: { 
    addToDone(task) { 
     task.completed = true; 
     console.log(task); 
    }, 
}, 

Answer 2

如果要編輯使用索引的項目，請嘗試這種方式

<li v-for="(task, index) in incompleteTasks" class="list-group-item"> 
    <input type="checkbox" name="" @click="addToDone(index)"> 
    {{task.description}} 
</li> 

在該方法中：

addToDone(index) { 
    this.$set(this.tasks[index], 'completed', true); 
},