Bug: Open many modals with one click using Vue JS

[fredyfx]

I was trying to integrate this amazing library with my vueJS front end application.

I installed it using npm but I am experimenting a problem. Let me show you:

Html

<div class="playbutton-center" 
         v-on:click="openVideo" 
         id="openyoutube" 
         data-video-id="xxxxxyyyyzz">
</div>

On the methods on VueJS

import ModalVideo from "modal-video";


methods: {
 openVideo: function () { 
     return   new ModalVideo("#openyoutube");
      }
   }

The problem:

• After the first click, nothing loaded.
• After the 2nd click, 1 video modal displayed. Dismiss one.
• After the 3rd click, 2 video modals displayed, one behind the other. Dismiss two.
• After the 4th click, 3 video modals displayed, one behind the others. Dismiss three.

Quick solution:

JavaScript

new Vue({
  el: "#js-homepage",
  data: {    
    counterClicks: 0
  },


methods: {
 openVideo: function () {
      if (this.counterClicks == 0) {
        this.counterClicks++;
        new ModalVideo("#openyoutube");
        setTimeout(function () {
          const youtubemodal = document.getElementById("openyoutube");
          youtubemodal.click();
        }, 500);
      }
    }
}

Now it works like a charm.

[steelydylan]

Hi @fredyfx I recommend not passing id to ModalVideo constructor in this case instead How about passing the this.$refs.(ref name) Since the ModalVideo also accept HTMLElement like below

new ModalVideo(this.$ref.video);

[fredyfx]

Hi @steelydylan The quick solution I shared is working nicely 😄

[daltonrooney]

I tried using ModalVideo in a Vue component without success. new ModalVideo(this.$ref.video); did not launch the video, even though the instance was created.

Instead I took a look at react-modal-video and created a Vue component based on that: https://gist.github.com/daltonrooney/561b13385e5e37d1657e9d7a171b5a29

It's not feature complete but it should be a good start for anyone who needs this functionality in Vue.