external page load in modal view + vuejs

Question

I am trying to open an external page in bootstrap modal view. It is working fine if the "open Modal" button is in normal div. But if the button is inside the div, which is accessed by vuejs, modal is opening but the page is not loading anymore.

here is my code

 <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>

Any idea?

Answer 1

Got solution: As I am calling the button with v-bind so, the trigger function should be inside method of vue js: So i replaced button in this way

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

In script we do not need $('button.btn.btn-primary').on('click', function(e) { .....} any more. instead write a method inside 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>');

                    }