Question

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

复选框的代码为

<div class="tick-box" :class="{ tick: isTicked }" @click="() => isTicked = !isTicked"></div>

可以找到。

但是，复选框太多了，所以我use object跟踪每个项目。看起来像这样

<!-- (inside v-for) -->
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" @click="() => {
  isTicked['lyr'+layer.lyr_id] = !isTicked['lyr'+layer.lyr_id]
}"></div>

现在什么也没有发生，根本没有错误。

当我想用isTicked查看{{ isTicked }}的值时，它只显示{}。

这是我在<script></script>部分中定义的。

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

您能帮我解决问题吗？

谢谢！

编辑：

我知道，声明为isTicked: {}的前几次点击不会执行任何操作，因为其属性未定义。但是，应该通过第一次/第二次点击来定义它，而不是这样。

Answer 1

这样更新时对象不会反映更改。您应该使用$ set设置对象属性，以使其具有反应性。尝试如下

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

添加以下方法：

onChecked() {
  this.$set(this.isTicked,'lyr'+this.layer.lyr_id, !this.isTicked['lyr'+this.layer.lyr_id])
}

Answer 2

VueJS通过引用监视数据，因此要更新状态下的对象，您需要创建一个新对象。

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

用作对象时，数据不会更新，但如果是变量，则数据会正常更改

2 个答案: