Javascript Vue待办事项列表，单击按钮的目标父数组列表项

我这里有个路障。我正在努力学习vue，并将我的头脑集中在vue上

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

我在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>

---

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

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

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

key

属性：

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

{{task.description}
标记任务完成

这只是使用

v-for

进行列表呈现的推荐做法。任何时候，只要有可能为列表项定义一个唯一的键，就可以使用它

---

您可以阅读更多关于

v-for

指令的信息，特别是Vue.js官方文档中的

key

属性。

太棒了，谢谢您的帮助和资源，工作起来很有魅力。我给她读一读。

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

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