Смена активного класса при клике с помощью vue.js?

Question

[HamSter]

Есть такая структура:

<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation"  v-on:click.prevent>
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="makeActive('container')" class="navigation-hamburger" :class="isActive ? 'active' : ''">
        +
      </button>
      
      <button  v-on:click="makeActive('container-fluid')" class="navigation-hamburger" :class="isActive ? 'active' : ''">
        -
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div v-bind:class="active">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>

vue.js:

new Vue({
  el: '#wrap',
  data: {
    active: 'container',
    isActive: true
  },
  // Functions we will be using.
    methods: {
        makeActive: function(item){
            // When a model is changed, the view will be automatically updated.
            this.active = item;
        }
    }
});

При клике на кнопки +\- меняется класс обертки для списка. jsbin

Вопрос: Как можно задать смену класса кнопок +\- активная\не активная при клике?

Answer 1

[0xD34F]

Сложить пары "текст кнопки / имя класса" в объекты, объекты в массив, массив сделать свойством компонента:

data: () => ({
  items: [
    { buttonText: '+', className: 'container' },
    { buttonText: '-', className: 'container-fluid' },
  ],
  ...
}),

На основе этого массива создавать кнопки:

<button
  v-for="n in items"
  v-text="n.buttonText"
  :class="{ active : active === n.className }"
  @click="active = n.className"
></button>

Похоже на то, к чему вы стремились?

Comments

[HamSter]

Да, круто! Спасибо!

Answer 2

[Илья Мясин]

Я бы сделал так

1) item и active - плохие названия для переменных, хранящих класс, makeActive - плохое название метода, его меняющего. Называем все по-людски.

data: {
    activeClass: 'container'
    ...
},
methods: {
    setActiveClass: function(className) { ... }
}

2) Хардкодить повторяющиеся штуки - это плохо, поэтому выносим список кнопок и связанных с ними классов в data, а в шаблоне ходим циклом:

data: {
    activeClass: 'container',
    buttons: [
      ['+', 'container'],
      ['-', 'container-fluid']
    ]
}

<button  v-for="[label, className] in buttons">...</button>

3) Собственно, теперь у нас есть все данные, чтобы выделить нужную кнопку. Кнопка активна, если текущий класс равен привязанному к ней классу, хранить отдельно состояние кнопки в data нет необходимости.
Дописываем шаблон:

<button 
         v-for="[label, className] in buttons"
         v-on:click="setActiveClass(className)"
         v-bind:class="{ active: className === activeClass }">
        {{label}}
      </button>