Как добавить события к массиву DOM элементов во Vue?

Question

[Виктор Архипов]

Допустим есть inline-template:

<list id="list" inline-template>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</list>

И в компоненте есть метод:

methods: {
  foo() {
    alert('hey')
  }
}

Как теперь повесить событие click на все элементы li, которое вызовет метод foo, при этом не прописывая в шаблоне @click каждому элементу li.

Вообщем самый простой и эффективный вариант оказался таким:

let vm = this;
  let items = vm.$el.querySelectorAll('li');
  items.forEach(item => {
    item.addEventListener('click', vm.foo());
  });

Всем спасибо.

Answer 1

[lavezzi1]

Либо так:

<li v-for="(item, index) in items" @click="foo(item)">{{ `item ${index + 1}` }}</li>

Либо черед делегирование событий.

Comments

[Виктор Архипов]

Я не могу выводить циклом элементы, элементы уже есть в DOM и я же написал без @click в каждом элементе li

[lavezzi1]

Виктор Архипов, значит только делегирование.

Answer 2

[Evgeny Kulakov]

Нативно через addEventListener.