如何从父母传递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); 
},