Vue V-для условного моделирования

Question

Я использую v-for для создания кнопок.Я добавляю класс .active, если isActiveButton() возвращает true:

<button 
  v-for="(text, index) in this.buttonOptions" 
  class="btn" 
  :class="{active: isActiveButton(text)}" 
  :value='text' 
  @mousedown.prevent @click="some_method">
    {{text}}
</button>

Каков наилучший способ добавить класс .active к первой кнопке, если isActive() возвращает false для все buttonOptions?Обратите внимание, что buttonOptions является опорой.

Answer 1

A Вычисляемое свойство - это путь!

var app = new Vue({
  el: '#app',
  data: {
    buttonOptions: ['button1', 'button2', 'button3', 'button4']
  },
  methods: {
    isActiveButton: function (text) {
      return (text === text.toUpperCase());
    },
    some_method: function() {
      console.log('Button clicked')
    }
  },
  computed: {
    shouldFirstBeActive: function () {
      return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
    }
  }
});

.active {
  background: #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <section>
    <button 
      v-for="(text, index) in buttonOptions" 
      class="btn" 
      :class="{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}" 
      :value='text' 
      @mousedown.prevent @click="some_method">
        {{text}}
    </button>
  </section>
</div>

Я не знаю, что делают методы isActiveButton, поэтому мне пришлось импровизировать: он проверяет, является ли строка заглавной.

В чем заключается хитрость вычисленного свойства shouldFirstBeActive, которое возвращает true, если все элементы в массиве buttonOptions не работают, метод isActiveButton:

return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0  

Если вынапример, измените button2 на BUTTON2, затем isActiveButton вернет true для этого элемента, что сделает вычисленное свойство shouldFirstBeActive равным false

var app = new Vue({
  el: '#app',
  data: {
    buttonOptions: ['button1', 'BUTTON2', 'button3', 'button4']
  },
  methods: {
    isActiveButton: function (text) {
      return (text === text.toUpperCase());
    },
    some_method: function() {
      console.log('Button clicked')
    }
  },
  computed: {
    shouldFirstBeActive: function () {
      return (this.buttonOptions.filter(el => this.isActiveButton(el))).length === 0
    }
  }
});

.active {
  background: #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <section>
    <button 
      v-for="(text, index) in buttonOptions" 
      class="btn" 
      :class="{active: isActiveButton(text) || (shouldFirstBeActive && index === 0)}" 
      :value='text' 
      @mousedown.prevent @click="some_method">
        {{text}}
    </button>
  </section>
</div>

Answer 2

Использовать вычисляемый, который фильтрует this.buttonOptions, где isActiveButton имеет значение true и принимает индекс в качестве параметра