Javascript 在VU.JS组件中不工作的基础6

我有一个

vue.js

单文件组件，带有一个按钮，可以打开带有视频的

zurb foundation

模式。当我点击按钮时，它会重新加载页面。它不会在dev工具控制台或网络部分显示任何错误。这是我的代码：在

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上。
你能更完整地粘贴你的代码吗？我们很难仅用一段代码来帮助你。但至少你应该这样做

in html file:

<a @click="popup()">WATCH VIDEO</a>
<div id="video"></div>

in vue file:

methods: {
    popup() {

        $('#video').foundation('open');
    }
}

html文件中的
：
观看视频
在vue文件中：
方法：{
弹出窗口（）{
$（'视频'）.foundation（'开放'）；
}
}
您需要从标记中删除href=”“属性：

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

观看视频
将vue与js插件集成时出现问题，因此请使用指令。对于任何jQuery插件和ZURB基金会JS插件都使用它。Explained
基金会根据您的
创建新元素。这个新元素是您通常看到的实际叠加。当您调用
$（document）.foundation（）时，将创建覆盖加载基础脚本后，

调用
foundation（）
时，您的模态（iniatal
数据显示
元素）不在视图中，因此不会创建覆盖

您可以在组件中再次添加in:b/p>
  mounted() {
    $(document).foundation();
  }

这将再次init基金会，这一次您的数据显示在视图中，因此创建了覆盖。
基础文档没有HREF属性。我测试了您的代码，并使用href present重新加载了一个页面，取出href为我解决了重新加载问题。你试过了吗？