CODEWITHSUNDEEP
vuejs2jwplayerinnerhtmlvtt
IIOT-Zero
IIOT-Zero

Reputation: 159

Vuejs 2 v-html not firing anchor events

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?

Upvotes: 0

Views: 752

Answers (1)

Daniel
Daniel

Reputation: 35684

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">

Upvotes: 1

Related Questions