Как вызвать событие клика без $ refs в vue?

Question

У меня есть такой шаблон:

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

Шаблон вложенного компонента span выглядит следующим образом:

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

Компонент абзаца отображается внутри contenteditable div.

Когда я нажимаю на абзац, я хочу вызвать событие щелчка на промежутке в пределах handleParagraphClick.

(Когда я нажимаю на абзац, я хочу поместить каретку в span и пометить span как текущий активный узел, что можно сделать, вызвав handleSpanClick, но это другая история.)

Это может быть сделано, используя

this.$refs.mySpan.click()

, но у меня нет $refs на пролетах. Как я могу сделать это без $refs?

Upd.

(Когда я нажимаю на пустое место абзаца, я хочу поставить курсор в конце последний промежуток и событие нажатия триггера для этого промежутка. Когда я щелкаю между промежутками, я хочу поставить каретку в начале правого промежутка (или в конце левого промежутка).)

Answer 1

У вас есть несколько диапазонов в качестве динамических c компонентов. В каком из них вы планируете вызвать метод handleSpanClick ? Вы по-прежнему можете использовать $ refs в v-for для доступа к массиву таких компонентов:

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

код:

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