bootstrap modal popup example

bootstrap modal popup example on load.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <ul>
    <div v-for="item in inventory">
      <a data-toggle="modal" :data-target="'#myModal' + item.id" :id="'mymodal' + item.id" @mouseup.prevent="openModalInNewTab">{{ item.name }} </a>

      <!-- Modal -->
      <div class="modal fade" :id="'myModal' + item.id">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              ${{ item.price }}
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </ul>
</div>

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {id: 1, name: 'MacBook Air', price: 1000},
      {id: 2, name: 'MacBook Pro', price: 1800},
      {id: 3, name: 'Lenovo W530', price: 1400},
      {id: 4, name: 'Acer Aspire One', price: 300}
    ]
  },
  methods: {
  	openModalInNewTab() {
    	if (event.which === 2 ) {
    		let modalId = event.path[0].id
        let baseURL = document.URL.split('#')[0]
        // below should be baseURL instead of direct jsfiddle link
        window.open('http://jsfiddle.net/vqxf7zyk/10' + '#id=' + modalId)
      }
    }
  },
  mounted() {
  	// don't know why link below doesn't work on fiddle, on my project it works fine
  	window.$('#mymodal' + document.URL.split('#id=')[1]).modal('show')
  }
});