Javascript 数据在用作对象时不会更新，但在'；这是一个变量

我正在编写一个函数，用于在单击时更新自定义复选框（出于某些原因，我不想使用本机复选框）

复选框的代码是

你能找到哪些作品

然而，有这么多的复选框，所以我必须跟踪每个项目。看起来像这样

现在什么也没发生，一点错误也没有

当我想用

{{isTicked}

查看

isTicked

值时，它只显示

{}

这是我在

部分中定义的

export default {
  data() {
    return {
      isTicked: {},
      ...
    };
  },
  ...
}

你能告诉我哪里弄错了吗

谢谢

编辑：

---

我知道，声明为

isTicked:{}

，最初的几次单击不会起任何作用，因为它的权限未定义。但是，它应该通过第一次/第二次单击来定义，而不是像这样。

对象在这样更新时不会反映更改。 您应该使用$set来设置对象属性，以便使它们成为被动的。 尝试如下

   <div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" @click="onChecked"></div>

---

VueJS通过引用监视数据，所以要更新处于状态的对象，您需要创建一个新的对象

onChecked(lyr_id) {
    const key = 'lyr'+lyr_id;
    this.isTicked = {...this.isTicked, [key]: !this.isTicked[key]};
}

---

我认为最好使用带有勾选值的数组，然后使用

v-for

呈现所有复选框。阅读对象更改检测：谢谢！这对我有帮助。我将其修改为oncheck（lyr_id），并在函数中使用它，即

this.$set（this.isTicked，'lyr'+lyr_id，！this.isTicked['lyr'+lyr_id]）

，因为

此.layer

不在范围内。

onChecked(lyr_id) {
    const key = 'lyr'+lyr_id;
    this.isTicked = {...this.isTicked, [key]: !this.isTicked[key]};
}