Фонд 6 модальный не работает в компоненте vue.js

Question

У меня есть однокомпонентный компонент с кнопкой, которая открывает 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

Answer 2

может укрепить ваш код более полно, его трудно помочь нам с помощью всего лишь кода сегмента. Но по крайней мере, вы должны сделать что-то подобное.

in html file: 

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

in vue file: 

methods: { 
    popup() { 

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

Answer 3

Вы должны удалить HREF = "" атрибут из тега:

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