vue checkbox v-model binding not working properly in the current version

Question

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"> {{ task.description }}
        </li>
      </ul>

      <h3>Completed Tasks</h3>
      <ul>
        <li v-for="task in completedTasks">
          <input type="checkbox" v-model="task.completed"> {{ task.description }}
        </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/

Not sure what changed in Vue to see this in one version and not the other. But the issue is happening because you don't have a `:key="var"` on the `v-for` elements. — thanksd, Oct 22 '19 at 15:39
@thanksd It worked! I guess they changed the default behavior of `v-for` or something... — Flayshon, Oct 22 '19 at 15:59

score 2 · Accepted Answer · edited Jul 15 '22 at 23:36

As pointed out by thanksd, including a :key to v-for solves the issue.

In the documentation, it says:

This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).

I guess the checkbox was the child component in this case, but still not sure as to why it used to work prior to version 2.6

vue checkbox v-model binding not working properly in the current version

1 Answers1