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

-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/

👤Tomer

Leave a comment