Vuejs 2 v-html没有发射锚事件

时间:2017-09-29 16:10:56

标签: vuejs2 jwplayer innerhtml vtt

我正在使用JW Player和Vuejs创建一个应用程序。我需要显示vtt文件让人想起(https://www.ted.com/talks/julio_gil_future_tech_will_give_you_the_benefits_of_city_life_anywhere/transcript)用户可以点击并移动到视频的特定部分。我可以使用' v-html'来获取vtt文件并显示它们。有助于使用换行和格式呈现脚本的属性。我坚持的是锚标签不接受' @ 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>

我也尝试使用动态组件,但到目前为止还没有运气。有什么帮助吗?

1 个答案:

答案 0 :(得分:1)

我认为您只需要将@click更改为@click.native

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

<强>更新

我想我现在明白了,问题是您的浏览器正在关注锚<a>。 Vue具有修饰符以防止默认操作。您可以在此处阅读:https://vuejs.org/v2/guide/events.html#Event-Modifiers

TL; DR;

<a @click.stop="myEvent">