Как использовать v-bind vue.js для нескольких элементов?

Question

[Анна Шатковская]

Здравствуйте! Начала изучать Vue.js и не могу понять, как назначить аргументы нескольким блокам?
Есть вот такой код в HTML:

<div class='useMas' v-bind:class="[activeClass, errorClass]"></div>
<div class='useMas' v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div class='useMas' v-bind:class="[{ active: isActive }, errorClass]"></div>

JS:

new Vue({
el:'.useMas',
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
})

Работает только для одного блока-первого, все остальные игнорирует. Подскажите, пожалуйста, как сделать для других блоков чтобы работало тоже?

Answer 1

[0xD34F]

Подскажите, пожалуйста, как сделать для других блоков чтобы работало тоже?

Указывайте в el родительский элемент этих блоков.

А ещё не вижу, чтобы у вас было определено свойство isActive. Почему в шаблоне оно используется, а в data его нет?

Comments

[Анна Шатковская]

То есть у них должен быть именно общий родитель? не имея общего родителя не получится назначить им классы используя один экземпляр?
По поводу isActive-пропустила случайно, спасибо.

[0xD34F]

Анна Шатковская, не обязательно родитель - общий предок. Или инициализируйте отдельный экземпляр Vue для каждого блока (что, вообще-то, довольно странно).

[Анна Шатковская]

Получается, для Vue не важно, указал ты в элементе class или id. Выполнится оно только для оного блока/элемента?

[0xD34F]

Анна Шатковская, да.

[Анна Шатковская]

Поняла, благодарю за помощь!:-)