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

來源

2016-12-14 Phillis Peters

有整合與JS插件VUE的問題，所以使用的指令。將它用於任何jquery插件和Zurb Foundation js插件。解釋here

來源

2017-06-26 18:44:15

你可以更完全地粘貼你的代碼，它很難幫助你只用段代碼。但至少你應該做這樣的事情。

in html file: 

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

in vue file: 

methods: { 
    popup() { 

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

來源

2016-12-15 06:40:04

您需要從標籤中刪除的href = 「」屬性：

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

來源

2016-12-16 03:00:00 Ross

基礎文檔沒有href屬性。我介紹了你的代碼，並有一個頁面重新加載與href目前，採取href解決了我的重新加載。你試過了嗎？ http://foundation.zurb.com/sites/docs/reveal.html – Ross

是的，我刪除了HREF，仍然沒有工作 –

基金會6模態不工作在vue.js組件

回答

相關問題