How can I include Vue.js code inside a Popper.js pop-up div?

Question

I have the following Popper.js popup in which I have a button on which I want to attach a Vue.js click event.

However, while the click event works outside the popup, it doesn't work instead the popup.

How can I get changeText() to work inside the popup as well?

https://jsfiddle.net/edwardtanguay/jxs5nmxs

HTML:

<div id="app">
  <div>
    Message: {{message}}
  </div>
  <div>
  <button @click="changeText()">outside works</button>
  </div>
  <hr/>
    <a href="#" 
       id="example" 
       class="btn btn-primary" 
       rel="popover"
       data-original-title="Test Form"
       data-content='
       <div class="form-group">
        <label for="exampleInputPassword1">Name</label>
        <input type="text" class="form-control">
       </div>
       <button @click="changeText()" class="btn btn-success">Submit</button>
       '>Fill out form</a>
</div>

JavaScript:

var vm = new Vue({
    el: '#app',
  data: function() {
    return {
        message: 'hello'
    }
  },
  methods: {
    changeText: function() {
        alert('test');
    }
  }
});

$(function () {
    $('#example').popover({html: true});
});

ADDENDUM:

• Even if I load the popover as a mounted hook, it only works outside the popup but not inside: https://jsfiddle.net/edwardtanguay/3seu8Lbw

• Nor does it work if I include the Vue.js HTML in a popper.js template parameter: https://jsfiddle.net/edwardtanguay/uaf5wjtn/

Answer 1

The reason it doesn't work is because popover injects it's own html dynamically and obviously Vue does not compile this template.

You'll have to use popover events to overcome this, it's a bit hacky but i don't see any other way:

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'hello'
    }
  },
  methods: {
    changeText: function() {
      alert('test');
    }
  },
  mounted: function() {
    var self = this;
    $('#example').popover({
        html: true
      })
      .on('hidden.bs.popover', function() {
        self.changeText()
      }).parent().delegate('.btn-success', 'click', function() {
        $('#example').popover('hide')
      });
  }
});

https://jsfiddle.net/vangj1uc/