title: How can I bind boostrap modal data by using vue
body: <p>To show bootstrap modal we can use data-toggle attribute. For example:
  <code>
  &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#msg"&gt;Open Modal&lt;/button&gt;
  </code></p>
  
  <p>I wanna show modal, by using vue bool variable data. This is my component:</p>
  
  <pre><code>Vue.component('modal', {
  delimiters: ['[[', ']]'],
  props: {
      id: String,
      hidden: Boolean
  },
  data: function () {
      return {
      }
  },
  computed: {
      getStyle: function() {
          if(this.hidden)
              return "display: hidden;"
          return "display: block;"
      }
  },
  methods: {
  },
  template: `
      &lt;div class="modal fade" v-bind:class="{show: !hidden}" role="dialog" :style="getStyle" :id="id"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;slot name="header"&gt;&lt;/slot&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;slot&gt;&lt;/slot&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  `
  })
  </code></pre>
  
  <p>than in html I have:</p>
  
  <pre><code>&lt;div id="msg_modal"&gt;
    &lt;modal :id="'msg'" :hidden='isHidden'&gt;
      {{ message }}
    &lt;/modal&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in script:</p>
  
  <pre><code>&lt;script&gt;
    var msg_modal = new Vue({
      el: '#msg_modal',
      data: {
        isHidden: false
      }
    })  
  &lt;/script&gt;
  </code></pre>
  
  <p>After that my modal is visible, but the behaviour is different than by clicking on "Open modal" button. For example I cannot close modal by clicking out of modal boundaries.</p>
  
  <p>Thanks in advance for your help.</p>
  
  <hr>
  
  <p>EDIT:
  I temporary fixed that by using jquery</p>
  
  <pre><code>computed: {
      id_selector: function() {
          return "#"+this.id;
      }
  },
  methods: {
      show: function() {
          this.modal('show');
      },
      hide: function() {
          this.modal('hide');
      },
      toggle: function() {
          this.modal('toggle');
  
      },
      modal: function(action) {
          $(this.id_selector).modal(action);
      }
  },
  </code></pre>
  
  <p>Does anyone know solution without jquery?</p>