@svilkov87

Как получать текст внутри тега при клике на него в Vue?

Всем доброго дня.

Есть код - в нем компонент и экземпляр.
Как при клике на .b-list__item выводить содержимое данного тега в консоль или в какой-то блок, например?

P.S: С директивой v-on пытался сделать, но вышло и не стал показывать, ибо стыдно, т.к. vue изучаю совсем недавно.
  • Вопрос задан
  • 527 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
выводить содержимое данного тега в консоль...

Вешаем на элемент списка обработчик клика, которому передаём соответствующий элемент массива данных. Внутри обработчика выполняем нужные действия:

<li v-for="n in items" @click="onClick(n)">
  {{ n.message }}
</li>

methods: {
  onClick(item) {
    console.log(item.message);
  }
}


...или в какой-то блок

Пусть этот блок будет расположен за пределами компонента. По клику генерируете событие, дополнительным аргументом передаём элемент массива данных:

<li v-for="n in items" @click="$emit('select', n)">
  {{ n.message }}
</li>

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

<b-list @select="selected = $event"></b-list>
<div v-if="selected">{{ selected.message }}</div>

data: () => ({
  selected: null,
  ...
})

Похоже на то, что вам нужно?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы