title: external page load in modal view + vuejs
body: <p>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.</p>
  
  <p>here is my code</p>
  
  <pre><code> &lt;div id="abc"&gt;
      &lt;button type="button" class="btn btn-primary" href="http://bing.com" data-toggle="modal" data-target="#myModal"&gt;
          Open modal1
      &lt;/button&gt; &lt;!-- this modal works perfectly and load bing webpage --&gt;
  &lt;/div&gt;
  
      &lt;div id="products"&gt;         
          &lt;div class="row"&gt;
              &lt;div v-for="product in allproducts" class="col-md-4 col-sm-12"&gt;
                  Price:{{product.price}}
                  &lt;button type="button" class="btn btn-primary" v-bind:href="'http://bing.com'" data-toggle="modal" data-target="#myModal"&gt;
                      Open Modal 2 
                  &lt;/button&gt; &lt;!-- on click, modal view is opening but bing webpage is not loading--&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- The Modal --&gt;
      &lt;div class="modal" id="myModal"&gt;
          &lt;div class="modal-dialog modal-lg"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
      &lt;script&gt;
       $('button.btn.btn-primary').on('click', function(e) {
                  e.preventDefault();
                  var url = $(this).attr('href');
                  $(".modal-body").html('&lt;iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"&gt;&lt;/iframe&gt;');
              });
  
      new Vue({
  
          el: '#products',
          data: {
              allproducts : myJsonData,
              deviceType:myDeviceType,
          },
  
          methods: {
              submitValue: function(event){
              },
          },
      });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Any idea?</p>