Добавление цвета фона к кнопке при нажатии остается в этом состоянии до тех пор, пока следующая кнопка не будет нажата в этой группе кнопок в vue js 2 - PullRequest
Новая
       27

Добавление цвета фона к кнопке при нажатии остается в этом состоянии до тех пор, пока следующая кнопка не будет нажата в этой группе кнопок в vue js 2

0 голосов
/ 23 февраля 2019

У меня есть две группы кнопок, которые создаются из массивов с помощью директивы v-for в Vue Js.Когда я нажимал кнопку в первой группе кнопок, мне нужно, чтобы она была в фокусе до тех пор, пока другая кнопка не будет нажата в этой группе кнопок, на состояние фокусировки не влияют никакие другие события щелчка, за исключением того, что другая кнопка была нажата в этой группе кнопок.Кнопки: 1.Все 2. Верно, 3. Неверно, 4. Нет На начальном этапе 1. Все кнопки должны быть в фокусе до тех пор, пока в этой группе кнопок не будет нажата следующая кнопка.

1 Ответ

0 голосов
/ 23 февраля 2019

Отслеживайте активную кнопку, добавляя активное свойство к каждому элементу массива: 

new Vue({
  el: '#app',
  data: () => ({
    buttons: [
      {
        text: 'All',
        active: true
      },
      {
        text: 'True',
        active: false
      },
      {
        text: 'False',
        active: false
      },
      {
        text: 'None',
        active: false
      }
    ]
  }),
  methods: {
    activate (b) {
      this.buttons.forEach(button => {
        button.active = button.text === b.text
      })
    }
  }
})
button {
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="(b,i) in buttons" :key="i" type="button" :style="{ 'background-color': b.active ? 'green' : 'grey' }" @click="activate(b)">{{ b.text }}</button>
</div>
...