Vuejs 2 v-html not firing anchor events

Question

I am creating an application using JW Player and Vuejs. I need to display vtt file reminiscent (https://www.ted.com/talks/julio_gil_future_tech_will_give_you_the_benefits_of_city_life_anywhere/transcript) where user can click and move to particular section of video. I can get the vtt file and display them using 'v-html' property which helps to render the transcript with line feed and formatting. What I'm stuck is anchor tags are not accepting '@click' event as its being rendered as HTML. Is there a way i can fire 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>

I tried using dynamic components as well but no luck so far. Any help?

score 1 · Answer 1 · edited Jul 15 '22 at 00:29

1

I think you just need to change @click to @click.native

reference: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

Update

I think I understand now, the issues is that your browser is following the anchor <a>. Vue has modifiers to prevent default actions. You can read about it here: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

TL;DR;

<a @click.stop="myEvent">

edited Jul 15 '22 at 00:29

tony19

125,647
18
229
307

answered Sep 29 '17 at 22:22

Daniel

34,125
17
102
150

That's one way to do it. But situation is, vtt file is initially stored on database, with a bit of formatting, and decorated with anchor tags (@click event, taking time as parameter) which are supposed to take video on specific position. Now when they are rendered as v-html, formatting and anchor tags are there but they don't fire (since they are rendered as html). – Abdul Rehaman Oct 01 '17 at 13:46
updated answer, you can also use multiple modifiers, such as `v-on.stop.prevent.native="action">` – Daniel Oct 01 '17 at 20:27

Vuejs 2 v-html not firing anchor events

1 Answers1

TL;DR;