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

Posted 2023-03-07

【中文标题】Vuejs 2 v-html没有触发锚事件

【英文标题】：Vuejs 2 v-html not firing anchor events

【发布时间】：2017-09-29 16:10:56

【问题描述】：

我正在使用 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>

我也尝试过使用动态组件，但到目前为止还没有成功。有什么帮助吗？

【参考方案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">

【讨论】：

这是一种方法。但情况是，vtt 文件最初存储在数据库中，带有一些格式，并用锚标签（@click 事件，以时间作为参数）进行装饰，这些标签应该在特定位置拍摄视频。现在，当它们呈现为 v-html 时，格式和锚标记就在那里，但它们不会触发（因为它们被呈现为 html）。

更新答案，也可以使用多个修饰符，如v-on.stop.prevent.native="action">