How to trigger click event without $refs in vue?

Question

I have template like this:

<p @click="handleParagraphClick">
    <component v-for="item in items" :is="spanComponent"/>
</p>

Template of nested span component is like this:

<span @click="handleSpanClick">{{content}}</span>

Paragraph component is rendered inside contenteditable div.

When I click on paragraph I want to trigger click event on span within handleParagraphClick.

(When I click on paragraph I want to put caret into span and mark span as current active node which can be done by calling handleSpanClick but this is another story.)

It could be done using

this.$refs.mySpan.click()

but I haven't $refs on spans. How can I do it without $refs?

Upd.

(When I click on the empty place of the paragraph I want to put caret at the end of the last span and trigger click event for that span. When I click between spans I want to put caret at the beginning of the right span (or at the end of the left span).)

Anatoly Anatoly · Accepted Answer · 2020-03-12T19:50:51

You have multiple spans as dynamic components. In which one are you planning on call the handleSpanClick method? You still can use $refs in v-for to access an array of components like this:

<p @click="handleParagraphClick"><component v-for="item in items" :is="spanComponent" refs="spans"/></p>

code:

const mySpan = this.$refs.spans[0] // get the first span for instance
mySpan.handleSpanClick()

How to trigger click event without $refs in vue?

1 Answers