Question

我在这里遇到障碍。我正在努力学习并围绕着我的头脑。

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

我在tasks数组的每个列表项中添加了一个按钮，点击后该按钮应更改为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进行列表渲染的推荐做法。只要您有可能为列表项定义唯一键 - 使用它。

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

Vue ToDo List，单击按钮的目标父数组列表项

1 个答案: