基金会6模态不工作在vue.js组件

问题描述：

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

<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的呼叫。

答

有整合与JS插件VUE的问题，所以使用的指令。将它用于任何jquery插件和Zurb Foundation js插件。解释here

答

你可以更完全地粘贴你的代码，它很难帮助你只用段代码。但至少你应该做这样的事情。

in html file: 

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

in vue file: 

methods: { 
    popup() { 

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

答

您需要从标签中删除的href = “” 属性：

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

基础文档没有href属性。我介绍了你的代码，并有一个页面重新加载与href目前，采取href解决了我的重新加载。你试过了吗？ http://foundation.zurb.com/sites/docs/reveal.html – Ross

是的，我删除了HREF，仍然没有工作 –

基金会6模态不工作在vue.js组件

相关推荐