Popper.jsのポップアップディビジョンに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はこのテンプレートをコンパイルしないので動作しません。

あなたはこれを克服するためにポップオーバーイベントを使用する必要があります、それは少しハックだが、私は他の方法で表示されていない。

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/