如何在 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});
});

附录：

• 即使我将弹出框加载为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/