时间戳

首页 > 解决方案 > Vue Js动态类绑定未更新

javascript - Vue Js动态类绑定未更新

问题描述

我一直在使用惯用的 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 经验导致我搜索不正确的术语。如果在我似乎无法理解它/在网上找到类似问题之前有人问过这个问题，我深表歉意。

谁能解释为什么这可能会这样失败背后的理论？在此处输入图像描述

标签： javascriptvue.js

解决方案

好的，事实证明这些方法对于注入 DOM 的新元素工作正常。在构建我的新 todo 对象时，我使用了属性“完成”来“假”而不是“完成” 。

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

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

推荐阅读