javascript - Vue ToDo List，点击按钮的Target父数组列表项

Question

我在这里遇到了障碍。我正在努力学习并全神贯注于 vue。

我有一个简单的待办事项列表，如果 completed = true 它将显示在已完成列表中，反之亦然。

我在任务数组的每个列表项中添加了一个按钮，单击该按钮时应更改为 true 并添加到已完成的列表中。

我相信我的问题是 li 中的按钮没有针对它所属的数组中的特定项目。

我想我现在在思考这个问题时遇到了一些麻烦。我觉得我在正确的轨道上，但在这一点上大脑受阻，星期五，嗯？感谢您的任何见解。

html

<ul>
      <li v-for="task in tasks">
        {{task.description}}
        <button v-on:click="markComplete">Mark Task Complete</button>
      </li>
    </ul>

    <h2>Incomplete</h2>
    <ul>
      <li v-for="task in incompleteTasks">
        {{task.description}}
      </li>
    </ul>

    <h2>Complete</h2>
    <ul>
      <li v-for="task in completeTasks">
        {{task.description}}
      </li>
</ul>

js

 var fnc = new Vue({
  el: '#app',
  data: {

    tasks: [
      {description: 'Go to work', completed: true},
      {description: 'Go to school', complete: false},
      {description: 'Do your home work', completed: true},
      {description: 'Watch hockey game', completed: false},
      {description: 'Eat dinner', completed: false}
    ]
  },

methods:{

 //This works if I specify an item in the array but for any button clicked
 //This adds Watch hockey game to complete list
 console.log(this.tasks[3].completed = true);

 //Logs true, nothing happens
  //console.log(this.tasks.completed = true);
 //Logs undefined
  //console.log(this.tasks.completed);

},
computed:{
    incompleteTasks(){
      return this.tasks.filter(task => ! task.completed);
    },
    completeTasks(){
      return this.tasks.filter(task => task.completed);
    }
}
)}

Answer 1

这是最简单的解决方案。在您的模板中:

<li v-for="(task, index) in tasks">
    {{task.description}}
    <button @click="markComplete(index)">Mark Task Complete</button>
</li>

在脚本中:

methods: {
    markComplete(idx) {
        this.tasks[idx].completed = true;
    },
},

我建议您为每个列表项元素设置一个 id 属性，并为它们指定 key 属性:

<li v-for="(task, idx) in tasks"
    :key="task.id">
    {{task.description}}
    <button @click="markComplete(idx)">Mark Task Complete</button>
</li>

这只是使用 v-for 进行列表渲染的推荐做法。任何时候您都可以为列表项定义唯一键 - 使用它。

您可以在 this section 阅读更多关于 v-for 指令的信息，特别是关于 key 属性的信息Vue.js 官方文档。