一次只有一个按钮处于活动状态，具体取决于状态答案

【问题标题】：Only one button active at a time depending on state一次只有一个按钮处于活动状态，具体取决于状态
【发布时间】：2020-05-07 15:03:09
【问题描述】：

我正在用 Vue.js 编写应用程序，但找不到解决问题的方法。

这是我的codeSandbox

我有一个对象数组，我将其转换为每个键都有错误值的对象。

sizesArray: [
    { number: "30", id: 1 },
    { number: "36", id: 2 },
    { number: "40", id: 3 }
],
sizesObject: {
    "30": false,
    "36": false,
    "40": false
},

我可以单独定位每个值，但是如何切换按钮以使一次只有一个值为真，而不是像现在这样单独切换？

似乎 For-in 循环或观察者会很好，我只是不知道如何处理它。

我已经在这个问题上坐了几个小时，似乎在堆栈溢出方面找不到类似的东西。谢谢！

【问题讨论】：

看起来像是“一对多”的关系。定义一个包含活动值的变量不是更好吗？ let activeButton = "36"
我认为这里已经解决了 - stackoverflow.com/questions/46814304/…
@OrBen-Yossef 我已经可以切换一个按钮，我现在的问题是在 3 个按钮中一次只有一个活动按钮。

标签： javascript vue.js object state

【解决方案1】：

您可以在任何一次点击中简单地循环浏览所有条目并将它们设置为false。之后，您可以将正确的设置为 true。这只是一个非常基本的解决方案，可以改进。但是，它可视化了要走的路。

  for (const o in this.sizesObject) {
    this.sizesObject[o] = false;
  }

  this.sizesObject[sizeNumber] = true;

https://codesandbox.io/s/wispy-bird-chk35

【讨论】：

非常简单直接，我喜欢它！我

【解决方案2】：

可以说比循环方法更好的方法是仅存储对当前活动项目的引用并在新选择时将其重置。见CodeSandbox Example。

toggle: function(number) {
  if (this.activeIndex !== null && this.activeIndex !== number)
    this.sizesObject[this.activeIndex] = false;
  this.sizesObject[number] = !this.sizesObject[number];
  this.activeIndex = number;
}

并称它为：

<button
      v-for="size in this.sizesArray"
      @click="toggle(size.number)"
      :class="{active: sizesObject[size.number]}"
      :key="size.key"
    >{{size.number}}</button>

【讨论】：

【解决方案3】：

您不需要 sizesObject 来实现该逻辑。相反，您可以添加一个数据“选定”，它存储选定/单击按钮的“id”。您可以通过检查“selected”值是否等于“id”来选择活动类。

这是完整的代码，

<template>
  <div class="hello">
    <button
      v-for="size in this.sizesArray"
      @click="setSelected(size.id)"
      :class="{active: selected === size.id}"
      :key="size.key"
    >{{size.number}}</button>
    <br>
    <br>
    {{sizesObject}}
    {{selected}}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sizesArray: [
        { number: "30", id: 1 },
        { number: "36", id: 2 },
        { number: "40", id: 3 }
      ],
      selected: null
    };
  },
  methods: {
    setSelected: function(value) {
      this.selected = value;
    }
  },
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  background-color: rebeccapurple;
  color: white;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

【讨论】：