The following code is supposed to list a series of tasks according to their status of completion. It works just fine when I use a 2.5.xx Vue cdn link.
However with the current version's cdn (>= 2.6.0), whenever I check/uncheck a task from either list, the next item on the list is checked/unchecked too, even though it's completed status attribute is not affected (I can see it with the Vue Chrome extension) unless I click on it again.
<div id="root">
<h3>Incomplete Tasks</h3>
<ul>
<li v-for="task in incompleteTasks">
<input type="checkbox" v-model="task.completed">
</li>
</ul>
<h3>Completed Tasks</h3>
<ul>
<li v-for="task in completedTasks">
<input type="checkbox" v-model="task.completed">
</li>
</ul>
</div>
new Vue({
el: '#root',
data: {
tasks: [{
description: 'Go to the store',
completed: true
},
{
description: 'Finish screencast',
completed: false
},
{
description: 'Make donation',
completed: false
},
{
description: 'Clear inbox',
completed: false
},
{
description: 'Make dinner',
completed: false
},
{
description: 'Clean room',
completed: true
},
]
},
computed: {
completedTasks() {
return this.tasks.filter(task => task.completed);
},
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
},
});
Is this a bug? Did something change in how we should use v-model?
Here's a fiddle reproducting the issue using Vue 2.6.10
https://jsfiddle.net/flayshon/fd7mejvo/2/
Aucun commentaire:
Enregistrer un commentaire