Vue JS способ переключения классов для компонента

Question

Я пробовал пару способов сделать это, но он, похоже, не работает. Возвращает activeClass не определен. И классList с открытым JS также возвращает undefined в Vue. Похоже, что это невозможно сделать в представленных документах.

Вот что я получил как плиту котла.

let attributes = { 
    activeClass: 'tab--active' 
} 

    Vue.component('insurance-menu', { 
     template: ` 
      <ul id="tabs"> 
       <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li> 
       <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li> 
       <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li> 
       <li><a class="tab" v-bind:class="{activeClass}" href="#">Link</a></li> 
      </ul>`, 
     data: function() { 
      return attributes 

     }, 
     methods: { 

     } 
    }); 

    let tabs = new Vue({ 
     el: '#menu-container' 
    }); 

Answer 1

Использование массива вместо объекта, чтобы вернуть значение:

<a class="tab" v-bind:class="[activeClass]"> 

Вы можете сделать ваш код более чистым, как это:

<a :class="['tab', activeClass]"> 

Answer 2

Вы можете использовать локальные данные, чтобы добавить определенный класс на ваших взглядах, что-то вроде этого:

<div v-bind:class="{ active: isActive }"></div>

На ваших ЯШ:

data: { isActive: true, hasError: false }

FYI вы можете использовать только: класс (без V-затруднительное), и это будет прекрасно, а также.

Этот код добавит «активный» класс к DIV если isActive свойство возвращает true

Источник: Docs и личного пользования (https://vuejs.org/guide/class-and-style.html#Object-Syntax)