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);
      }
  }

})

勾选复选框我要将该对象的已完成属性切换为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);
},

如何在vue js中将父级的引用传递给子级

2 个答案: