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

Question

[svilkov87]

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

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

P.S: С директивой v-on пытался сделать, но вышло и не стал показывать, ибо стыдно, т.к. vue изучаю совсем недавно.

Answer 1

[0xD34F]

выводить содержимое данного тега в консоль...

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

<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,
  ...
})

Похоже на то, что вам нужно?

Comments

[svilkov87]

да, спасибо)