javascript - Foundation 6 模式在 vue.js 组件中不起作用

Question

我有一个 vue.js 单文件组件，它带有一个按钮，可以打开带有视频的 zurb foundation 模态。当我单击按钮时，它会重新加载页面。它不会在开发工具控制台或网络部分显示任何错误。这是我的代码:在 home.vue

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

url 是正确的，它甚至调用了 youtube。

Answer 1

vue 与 js 插件集成有问题，所以使用指令。将它用于任何 jquery 插件和 Zurb Foundation js 插件。说明here