mardi 22 octobre 2019

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

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