Foundation 6 modal not working in vue.js component

Question

I have a vue.js single file component with a button that opens a zurb foundation modal with a video. When I click the button it reloads the page. It doesn't show any error in the dev tools console or in the network section. Here is my code: In 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>

The url is correct and its even making a call to youtube.

Answer 1

There is an issue integrating vue with js plugins, so use directives. Use this for any jquery plugins and Zurb Foundation js plugins. Explained here

Answer 2

Foundation creates a new element based on your <div class="reveal" id="someModal" data-reveal>. This new element is the actual overlay you normally see. The overlay is created when you call $(document).foundation(); after loading the Foundation script.

Your modal (the iniatal data-reveal element) is not in view when foundation() is called, so no overlay is created.

You can init Foundation again in your component by adding:

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

This will init Foundation again, this time with your data-reveal in view, so the overlay is created.

Answer 3

can u paste your code more completely,its hard for us to help u with just an segment code.But at least u should do something like this.

in html file:

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

in vue file:

methods: {
    popup() {

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

Answer 4

You need to remove href="" attribute from A tag:

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