如何在Popper.js弹出div中包含Vue.js代码？

Question

我有以下Popper.js弹出窗口，其中我有一个按钮，我想附加一个Vue.js点击事件。

但是，虽然点击事件在弹出窗口之外有效，但它不起作用而不是弹出窗口。

我如何才能让changeText()在弹出框内工作？

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});
});

附录：

• 即使我将popover作为mounted挂钩加载，它也只能在弹出窗口之外工作，但不在内部：https://jsfiddle.net/edwardtanguay/3seu8Lbw

• 如果我在popper.js template参数中包含Vue.js HTML，它也不起作用：https://jsfiddle.net/edwardtanguay/uaf5wjtn/

Answer 1

它不起作用的原因是因为popover动态地注入了它自己的html，显然Vue没有编译这个模板。

你必须使用popover事件来克服这个问题，它有点hacky但我没有看到任何其他方式：

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/