vue checkbox Привязка v-модели не работает должным образом в текущей версии - PullRequest
Новая
       45

vue checkbox Привязка v-модели не работает должным образом в текущей версии

3 голосов
/ 22 октября 2019

Следующий код должен перечислять серию задач в соответствии с их статусом выполнения. Он работает очень хорошо, когда я использую ссылку CDN 2.5.xx Vue.

Однако с cdn текущей версии (> = 2.6.0), когда я проверяю / снимаю галочку с задачи из любого списка, следующий элемент насписок также отмечен / не отмечен, даже если атрибут статуса завершен не затронут (я вижу его с расширением Vue Chrome), если я не нажму на него снова. 

    <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);
    },
  },
});

Этоошибка? Что-то изменилось в том, как мы должны использовать v-модель?

Вот скрипка, воспроизводящая проблему с использованием Vue 2.6.10

https://jsfiddle.net/flayshon/fd7mejvo/2/

...