Переключение классов в vue.js

#vuejs

Пытаюсь разобраться в vue.js. Есть простой список:


  

    

      item 1
    
    

      item 2
    
  



Нужно при клике на ссылку присваивать только этому пункту активный класс (т.е. у
других пунктов - убирать активность).

С jquery я бы сделала так:



$('.link').on('click', function(e){
  e.preventDefault();
  
  var $this = $(this),
      item = $this.closest('.item');
  
  if(!item.hasClass('active')){
    item.addClass('active')
      .siblings()
      .removeClass('active');
    
  } else {
    item.removeClass('active');
  }
});
.active {
  border: 1px solid red;
}


  

  

    

      item 1
    
    

      item 2
    
  





Вопрос: как можно реализовать подобное переключение классов с помощью vue (присвоение
класса не ссылке, а пункту li -шке)?



var app = new Vue({
  el: '#app',
  
  data: {
    
  },
  
  methods: {
    toggle: function(e){
      e.preventDefault();
      
      alert('click');
    }
  }
});
.active {
  border: 1px solid red;
}


  

  

    

      item 1
    
    

      item 2
    
  




    

Ответы

Ответ 1

Могу предложить такой вариант:



var app = new Vue({
  el: '#app',
  
  data: {
    activeLink: undefined
  }
});
.active {
  border: 1px solid red;
}


  

  

    

      item 1
    
    

      item 2
    
  



Ответ 2


  

    

      item 1
    
    

      item 2
    
  


var app = new Vue({
  el: '#app',
  data: {
     links: {}

  },

  methods: {
     toggle: function(e){
       e.preventDefault();
       var id = e.target.id;

       this.links = {};
       this.links[id] = true;
     }
  }
});


Ответ 3

Vue действительно предполагает немного другой формат общения между отдельными компонентами,
вместо прямой работы с чем-то Vue предлагает изменять данные, а в ответ на изменения
Vue будет пересобирать HTML в соответствии с текущим состоянием. Если использовать
текущий шаблон, то приведенный @АлексейМатвеев ответ будет самым верным, но скорее
всего этот список должен генерироваться "на лету". В этом случае можно было бы сделать так:



var app = new Vue({
  el: '#app',
  data: function () {
    return {
      activeItem: null,
      items: ['Link 1', 'Link 2']
    }
  }
});
.active:after {
  content: '< active';
  color: red;
}


  

    

      
        {{ item }}
      
    
  





В этом случае список создается из data.items, а по клику на элемент data.activeItem
устанавливается равным индексу текущего элемента. Директива v-bind:class анализирует
объект и устанавливает классами те ключи, для которы значение составляет true. Таким
образом класс active автоматом будет устанавливаться только для тех элементов, у которых
индекс совпадает с activeItem (такой элемент, конечно, только один). Если бы нужно
было  выделить какой-то элемент по умолчанию, достаточно было бы установить activeItem
в соответствующий индекс с самого начала (например, в 0).

В более сложном примере отдельные элементы списка были бы отдельными компонентами
и не имели бы общей data. В этом случае компонент должен был бы по клику создавать
событие (toggle), а родительский элемент ловить его и менять data, activeItem из которой
передавался бы в дочерние элементы в качестве prop.

Ссылки по теме:


Рендеринг списков
Работа с классами и стилями
Компоненты (в т.ч. отношения родитель/дочерний компонент)