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

我有下面的Popper.js弹出窗口，其中有一个按钮，我想在上面附加Vue.js单击事件

但是，虽然单击事件在弹出窗口之外工作，但它在弹出窗口之外不工作

如何让

changeText（）

也在弹出窗口中工作？

HTML: 增编：

• 即使我将popover作为

  挂载的

  挂钩加载，它也只能在弹出窗口外部工作，而不能在内部工作：

• 如果我在popper.js

  模板中包含Vue.js HTML，它也不起作用
  

---

它不起作用的原因是popover动态注入了自己的html，显然Vue不编译此模板

您必须使用popover事件来克服这一问题，这有点骇人，但我看不到任何其他方法：

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

---

它不起作用的原因是popover动态注入了自己的html，显然Vue不编译此模板

您必须使用popover事件来克服这一问题，这有点骇人，但我看不到任何其他方法：

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

---

但这段代码也有一个不想要的效果，即当单击原始的“填写表单”按钮时，也会执行changeText（）函数，实际上只需关闭弹出窗口即可。我刚才给了您一个如何执行的示例，我不知道您的逻辑是什么，如果功能冲突，您可以使用2个不同的函数。我试图理解代码。你从哪里得到的

隐藏.bs.popover

？如果将其更改为例如

hidden.bs.popoverx

，则提交按钮将隐藏弹出窗口。但是我看不出

hidden.bs.popover

指的是什么。好吧，找到它：hidden.bs.popover，“当popover完全隐藏时发生（CSS转换完成后）”，看起来有太多的东西不起作用，例如

v-model

在弹出窗口中不起作用：但是这个代码也有不想要的效果，当你点击原始的“填写表单”按钮时，changeText（）函数也会被执行，这实际上应该只是关闭弹出窗口。我只是给了你一个如何执行的例子，我不知道你的逻辑是什么，如果功能冲突，你可以使用两个不同的函数。我试图理解代码。你从哪里得到的

隐藏.bs.popover

？如果将其更改为例如

hidden.bs.popoverx

，则提交按钮将隐藏弹出窗口。但是我看不出

hidden.bs.popover

指的是什么。好的，找到它：hidden.bs.popover，“当popover完全隐藏时（CSS转换完成后）发生）”看起来有太多的东西不起作用，例如

v-model

在弹出窗口中不起作用：

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