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

你能把你的代码贴得更完整吗，我们很难只用一段来帮助你code.But至少你应该做这样的事情。

in html file:

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

in vue file:

methods: {
    popup() {

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

Answer 2

您需要从 A 标签中删除 href="" 属性：

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

Answer 3

将 vue 与 js 插件集成时出现问题，因此请使用指令。将其用于任何 jquery 插件和 Zurb Foundation js 插件。解释

Answer 4

Foundation 根据您的 <div class="reveal" id="someModal" data-reveal> 创建了一个新元素。这个新元素是您通常看到的实际叠加层。加载 Foundation 脚本后调用 $(document).foundation(); 时会创建叠加层。

当调用 foundation() 时，您的模式（初始 data-reveal 元素）不在视图中，因此不会创建覆盖。

您可以通过添加以下内容在您的组件中再次初始化 Foundation：

  mounted() {
    $(document).foundation();
  }

这将再次初始化 Foundation，这次会查看您的数据显示，因此会创建叠加层。

Foundation 6 模态在 vue.js 组件中不起作用

Foundation 6 modal not working in vue.js component

javascript

zurb-foundation

vue.js

vue-component

vuejs2