Vue Js动态类绑定未更新

Question

我一直在使用常用的todo应用程序学习Vue Js。

我根据todo的真实值将类绑定到我的todo对象。完成如下：

react-hook

iscomplete类仅通过文本修饰添加一行。

该复选框调用以下方法：

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

以上内容适用于DOM中已存在的任何待办事项，但是当添加新的待办事项时，动态类绑定将不再起作用。

我在下面添加了一个简短的gif图像来显示问题。

我似乎找不到任何答案，也许是因为我对Vue缺乏经验导致我搜索不正确的术语。如果确实有人问我，或者在网上找到类似的问题，我确实道歉。

任何人都可以解释为什么如此失败的背后的理论吗？

Answer 1

将方法设为计算方式

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

该方法适用于刷新页面之后的数据。 计算结果会侦听可能具有该变量的任何更改;）

Answer 2

好吧，事实证明这些方法对于注入DOM的新元素都可以正常工作。 构造新的待办事项对象时，我将属性'complete'设置为false，而不是'completed'。

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

因此，在触发该方法时，它正在更新不应该存在且未被引用的属性。