How to get text inside a tag on click in Vue?

Question

Vue.js

Good day everyone.
There is a code - in it a component and an instance.
How, when clicking on .b-list__item, to display the contents of this tag in the console or in some block, for example?
PS: I tried to do it with the v-on directive, but it turned out and did not show it, because I'm ashamed, because I'm new to vue.

Answer 1

print the contents of this tag to the console...

We hang a click handler on the list element, to which we pass the corresponding element of the data array. Inside the handler, we perform the necessary actions:

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

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

...or in some block

Let this block be located outside the component. Generate an event on click, pass an element of the data array as an additional argument:

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

In the parent component, we subscribe to this event, save the received data to the component property, and output it:

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

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

Does it look like what you need ?