模式视图+vuejs中的外部页面加载

Question

我正试图在引导模式视图中打开一个外部页面。如果"open Modal"按钮在正常的div中，它可以正常工作。但如果按钮在vuejs访问的div内，则Modal正在打开，但页面不再加载。

这是我的代码

<div id="abc">
<button type="button" class="btn btn-primary" href="http://bing.com" data-toggle="modal" data-target="#myModal">
Open modal1
</button> <!-- this modal works perfectly and load bing webpage -->
</div>
<div id="products">         
<div class="row">
<div v-for="product in allproducts" class="col-md-4 col-sm-12">
Price:{{product.price}}
<button type="button" class="btn btn-primary" v-bind:href="'http://bing.com'" data-toggle="modal" data-target="#myModal">
Open Modal 2 
</button> <!-- on click, modal view is opening but bing webpage is not loading-->
</div>              
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
$('button.btn.btn-primary').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
new Vue({
el: '#products',
data: {
allproducts : myJsonData,
deviceType:myDeviceType,
},
methods: {
submitValue: function(event){
},
},
});
</script>

知道吗？

Answer 1

得到的解决方案：由于我使用v-bind调用按钮，因此触发器函数应该在vue-js的方法内部：所以我用这种方式替换了按钮

<input class="btn btn-primary" type="button" value="Click it!" v-on:click="selectProduct(product.id+'.png');" data-toggle="modal" data-target="#myModal"/>

在脚本中，我们不再需要$('button.btn.btn-primary').on('click', function(e) { .....}。而是在vue 中编写一个方法

selectProduct: function(id){
var url = "/abc.html?myselection="+id; //or anyother html page
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
}