Vue Js动态类绑定未更新答案

【问题标题】：Vue Js Dynamic Class Binding Not UpdatingVue Js动态类绑定未更新
【发布时间】：2020-08-05 10:34:38
【问题描述】：

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

我正在根据 todo.completed 的真值将一个类绑定到我的 todo 对象，如下所示：

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

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

复选框调用如下方法：

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

上述方法适用于 DOM 中已存在的任何待办事项，但当添加新待办事项时，动态类绑定不再有效。

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

我似乎找不到任何答案，也许我缺乏 Vue 经验导致我搜索不正确的术语。如果在我似乎无法理解/在网上找到类似问题之前有人问过这个问题，我深表歉意。

谁能解释为什么这可能会失败的背后的理论？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

将方法设为计算方法

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

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

【讨论】：

返回未定义
在显示变量的父元素中添加 v-if="markComplete"。
我不是作者，只是想提一下，您建议放置 v-if="undefined" 没有用 - 因为您的计算返回未定义
它返回 undefined 因为计算方法首先在模板中运行，然后在脚本中运行，所以它还没有值所以返回 undefined
javascript 中任何没有明确返回语句的函数都返回未定义。

【解决方案2】：

好的，事实证明这些方法对于注入到 DOM 中的新元素工作正常。在构建我的新 todo 对象时，我使用属性 'complete' 来设置 'false' 而不是 'completed'。

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

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

【讨论】：