Vuejs 2 v-html не запускает якорные события

Question

Я создаю приложение, используя JW Player и Vuejs. Мне нужно отобразить файл vtt, напоминающий ( https://www.ted.com/talks/julio_gil_future_tech_will_give_you_the_benefits_of_city_life_anywhere/transcript), где пользователь может щелкнуть и перейти к определенному разделу видео. Я могу получить файл vtt и отобразить их, используя свойство v-html, которое помогает отображать стенограмму с переводом строки и форматированием. Я застрял в том, что якорные теги не принимают событие @click, поскольку оно отображается как HTML. Есть ли способ, которым я могу уволить vuejs evetns

 <div v-show="viewTranscript" class="boxes"
                                     :class="{'animated fadeIn': viewTranscript, 'animated fadeOut': !viewTranscript}"
                                     >
                                    <!--<pre><a @click="videoPosition('00:30')">00:30</a>-->
                                    <pre>
                                        <component v-bind:is="vttCustomComponent"/>
                                        <!--<transcriptvtt :vttFileContent="captionTrack">Loading Transcript</transcriptvtt>-->
                                    </pre>
                                </div>

Я также пытался использовать динамические компоненты, но пока не повезло. Любая помощь?

Answer 1

Я думаю, вам просто нужно изменить @click в @click.native

ссылка: https://vuejs.org/v2/guide/components.html

---

Обновить

Я думаю, что теперь я понимаю, проблема в том, что ваш браузер следит за якорем <a>, В Vue есть модификаторы для предотвращения действий по умолчанию. Вы можете прочитать об этом здесь: https://vuejs.org/v2/guide/events.html

TL;DR;

<a @click.stop="myEvent">