В зависимости от состояния активна только одна кнопка

Question

Я пишу приложение в 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 l oop или наблюдатель были бы хороши для этого, я просто не уверен, как подойти it.

Я уже несколько часов сижу над этой проблемой и, похоже, не могу найти что-то похожее при переполнении стека. Спасибо!

Answer 1

Возможно, лучший подход, чем метод l oop, - просто сохранить ссылку на текущий активный элемент и сбросить его при новом выборе. См. Пример CodeSandbox .

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>

Answer 2

Вам не нужен sizeObject для реализации этой логики c. Вместо этого вы можете добавить данные «selected», в которых хранится «id» выбранной / нажатой кнопки. И вы можете выбрать активный класс, проверив, равно ли «выбранное» значение «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>

Answer 3

Вы можете просто l oop просмотреть все записи в любой клик и установить их на false. После этого вы можете установить правильное значение true. Это просто довольно элементарное решение и может быть улучшено. Тем не менее, он визуализирует путь к go.

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

  this.sizesObject[sizeNumber] = true;

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