如何在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);
},