javascript - VueJS 代码 - 错误的行为 - 怎么了?
问题描述
我在 VueJs 中有这个代码,简单的任务列表,已完成和未完成的,当我选中或取消选中该框时,任务应该移动到正确的列表。
var app = new Vue({
el: '#vueapp',
data: {
tasks: [{
id: 1,
description: 'Do some Stuff',
completed: false
},
{
id: 2,
description: 'Go to pharmacy',
completed: false
},
{
id: 3,
description: 'Go to doctor',
completed: true
},
{
id: 4,
description: 'Do some Slask',
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
<h2>Completed Tasks</h2>
<ul>
<li v-for="(task, key) in completedTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
<h2>Incomplete Tasks</h2>
<ul>
<li v-for="(task, key) in incompleteTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
</div>
在 Chrome 中测试。尝试检查第一个未完成的任务,它成功移动到上列表中,但是下一个未完成的任务也被检查了。!!!!!!
解决方案
您需要为您的循环添加一个键:key="task.id"
。
为了给 Vue 一个提示以便它可以跟踪每个节点的身份,从而重用和重新排序现有元素,您需要为每个项目提供一个唯一的 key 属性。key 的理想值是每个项目的唯一 ID。
var app = new Vue({
el: '#vueapp',
data: {
tasks: [{
id: 1,
description: 'Do some Stuff',
completed: false
},
{
id: 2,
description: 'Go to pharmacy',
completed: false
},
{
id: 3,
description: 'Go to doctor',
completed: true
},
{
id: 4,
description: 'Do some Slask',
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
.as-console-wrapper { display: none !important; }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
<h2>Completed Tasks</h2>
<ul>
<li v-for="(task, key) in completedTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
<h2>Incomplete Tasks</h2>
<ul>
<li v-for="(task, key) in incompleteTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
</div>
推荐阅读
- azure - 为什么我的 IdentityServer4 应用程序无法在 Azure WebApp 托管环境中启动?
- reactjs - 如何删除使用 React Router 创建的一些额外空格
- python - 如何从已知参数构造相机矩阵
- swift - 从单独的类调用函数不起作用
- android - Firebase Crashlytics - 获取堆栈跟踪信息以在 CrashlyticsListener.crashlyticsDidDetectCrashDuringPreviousExecution() 期间显示
- jquery - 如何将完整的日历日期添加到动态文本框
- .htaccess - 我想使用 url 重写来缩短我的 url,但它不起作用
- javascript - 调用函数时如何解决函数范围问题
- javascript - 客户端从C#压缩字符串解压回字符串
- node.js - 端口转发不适用于 Nodejs 应用程序