如何在 Vuejs 中一次将多个数据项更改为 true

Question

我是 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

有人可以帮我吗？

Answer 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;
  });
},

如何在 Vuejs 中一次将多个数据项更改为 true

How to change several data items to true one at a time in Vuejs

javascript

frontend

vue.js