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

Question

[run182]

У меня на странице есть такой элемент <div ref="playField">, в него я добавил несколько элементов <div @click="alertCall"> вот таким образом - this.$refs.playField.innerHTML.
Как я могу отследить клик по созданному <div></div>?
Вызов метода alertCall не работает.

Answer 1

[Aetae]

Ну, во первых, так делать не надо.
А так два варианта:
1. Делать так как без всякого Vue - querySelector там, addEventListener... Вы сами отказались от удобства Vue использовав innerHTML.
2. Повесить @click на playField и смотреть на event.target.

Comments

[run182]

Второй вариант это как правильны было бы сделать? Я только начал изучать VueJS, поэтому если подскажете правильный вариант, буду благодарен!
Задача - вывести на экран данные, полученные от API (API возвращает количество блоков, которые нужно добавить, и контент для них).

[WapSter]

run182, нет это всего лишь способ. Правильно отдавать туда компонент, использовать циклы, условия в зависимости от тогда что добавляете или как добавляете вместо innerHTML.

[Aetae]

run182, api должен возвращать контент этих блоков в json, а сами блоки должен рисовать Vue. Никакого html. Это единственный правильный вариант, всё остальное - так, костыли.