Vue Js Dynami c Привязка класса не обновляется

Question

Я изучал Vue Js с помощью обычного приложения todo.

Я привязываю класс к своим объектам todo на основе истинного значения todo.completed, как показано ниже:

    <a v-bind:class="{iscomplete : todo.completed}">
    <input type="checkbox" v-on:change="markComplete" />

Класс iscomplete просто добавляет строку через оформление текста.

Флажок вызывает следующий метод:

methods: {
    markComplete() {
      this.todo.completed = !this.todo.completed;
    }

Вышеупомянутое работает для любых задач, уже находящихся в DOM, но когда добавляются новые задачи, привязка класса Dynami c больше не работает.

Я добавил небольшой gif-файл ниже, показывающий проблему.

Кажется, я не могу найти ничего отвечает, возможно, мой недостаток опыта работы с Vue заставляет меня искать неправильные термины. Прошу прощения, если об этом спросили до того, как я, кажется, не могу осмыслить это / найти похожие проблемы в Интернете. введите описание изображения здесь

Answer 1

Хорошо, оказывается, эти методы отлично работают для новых элементов, внедренных в DOM. Я использовал свойство 'complete' как 'false' вместо 'completed' при создании моего нового объекта todo.

    prepareTodo: function () {
      const newTodo = {
        id: Math.random(2),
        description: this.todoDescription,
        complete: false,
      };

Следовательно, когда метод был его запуск обновлял свойство, которое не должно существовать и на которое нет ссылки.

Answer 2

сделать метод вычисленным

computed: {
    markComplete() {
      this.todo.completed = !this.todo.completed;
    }

Метод работает для данных, которые у вас есть после refre sh page. computed слушает любые изменения, которые могут иметь переменную;)