如何在 Vuejs 中一次将多个数据项更改为真正的一个答案

【问题标题】：How to change several data items to true one at a time in Vuejs如何在 Vuejs 中一次将多个数据项更改为真正的一个
【发布时间】：2021-12-18 06:22:06
【问题描述】：

我对 Vuejs 很陌生，我想知道如何在 Vuejs 中完成这项工作

我有一组不同的数据：

  data() {
    return {
      recents: false,
      frontend: false,
      backend: false,
      devops: false,
      tutoriais: false,
    };
  },

当我点击一个按钮时，它会调用 openOptions() 并将特定属性更改为 true 或 false。

openOptions(e) {
      const optionClicked = e.target.text.toLowerCase();
      this[optionClicked] = !this[optionClicked];
    },

但是，我不能让 2 个属性为真。我需要将其他所有内容都设置为false，但我很难理解如何完成这项工作。所以基本上我需要的是

set the one I clicked to true
and the rest to false

谁能帮我解决这个问题？

【问题讨论】：

如果我们点击两次recents按钮会怎样？

标签： javascript vue.js frontend

【解决方案1】：

您可以先将对象创建为单个实体，我使用了一个名称为collection的对象

现场演示

data() {
    return {
      collection: {
        recents: false,
        frontend: false,
        backend: false,
        devops: false,
        tutoriais: false,
      },
    };
  },

然后，您可以在每个元素上附加单击侦听器（如果需要，您还可以在其父级上附加单击侦听器）

<button
      v-for="[key, value] in Object.entries(this.collection)"
      :key="key"
      v-on:click="() => openOptions(key)"
    >
      {{ key }}
      {{ value }}
    </button>

当用户点击任何button 时，只有它的值会设置为true，其余的都是false：

openOptions(clickedKey) {
  Object.keys(this.collection).forEach((key) => {
    this.collection[key] = key === clickedKey ? true : false;
  });
},

【讨论】：