Vuejs Bootstrap modal

by sbaydakov

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<template id="bs-modal">
    <!-- MODAL -->    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>    
</template>

<div class="container" id="el">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Editor: {{query}}</h3>
        </div>
        <div class="panel-body">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
        </div>
    </div>
    <div class="text-center">---End of editor---</div>
    <modal></modal>
    
    
</div>

JavaScript

Vue.component('modal', {
    template: '#bs-modal',
    data: function () {
        console.log("### DATA");
    },
});

var vm = new Vue({
  el: '#el',
  data: {
    query: "select * from clients;",
  },
});