VueJS单击1按钮并禁用其余按钮

Question

所以我在v-for循环中有3个按钮，其中带有click方法。

我想单击一个按钮并禁用其他按钮，但是也可以单击活动按钮并启用另一个按钮。

谢谢：）

“数据”：[]

<div v-for="(index, value, key) in data.data">
    <button @click="onClick(index)">
        <div>{{ index.id }}</div>
    </button>
</div>

onClick(index) {//}

Answer 1

像这样吗？

var app2 = new Vue({
  el: "#app",
  data: {
    buttons: [false, false, false]
  },
  methods: {
    onClick(index) {
      if (this.buttons.every(b => !b)) {
        this.buttons = this.buttons.map((b, i) => (i === index ? false : true));
      } else {
        this.buttons = this.buttons.map(b => false);
      }
    }
  }
});

https://codepen.io/bart0810/pen/zJXNXx