ブートストラップダイアログをvueJsコンポーネントとして使用するには？

Question

私は、このダイアログがpropsを使って定数（メッセージ、ボタン）をカスタマイズできるvueコンポーネントであるブートストラップモーダルダイアログを表示して非表示にしたいと思います。

私はv-if='show'を使用していますが、モーダルの背景をクリックしてモーダルを閉じると、show〜falseを設定できないという問題があります。その結果、ダイアログは一度表示されますが、閉じているときは、もう一度、削除ボタンを押しても表示されません。

I持っている別のコンポーネントの確認・削除」次のようにcopntains '人' と呼ばれる1つのvue.jsコンポーネント：

Person.vue：

<template> 
    <div> 
     <confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete> 
     <!-- person details --> 
     <button @click="confirmDelete"> 
      <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      show: false, 
      deleteMsg: '' 
     } 
    }, 
    methods: { 
     confirmDelete() { 
      this.show: true, 
      this.deleteMsg: 'Are you sure you want to delete this person?' 
     } 
    } 
} 
</script> 

ConfirmDelete.vue：を

<template> 
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="media-body"> 
        <p>{{msg}}</p> 
       </div> 
      </div> 
     </div> 
    </div> 
<template> 

<script> 
    export default { 
     props: ['msg'], 

     mounted: function(){ 
      $('#modalDelete').modal('show') 
     } 
    } 
</script> 

もちろん、1つのコンポーネントだけをt彼は人に会話、これは動作します。しかし、私の目標は、このダイアログコンポーネントをアプリケーションの他の部分に再利用することです。

どうすればいいですか？

Answer 1

私はあなたのPerson.vueテンプレートであなたのconfirm-deleteコンポーネントタグにref属性を追加し、ConfirmDelete.vueに単にブートストラップ法を発射show方法を与えるだろう。そうすれば、親のconfirmDeleteメソッドのブートストラップメソッドをthis.$refs.modal.show()経由で起動できます。 More info on refs.

Person.vue：

<template> 
    <div> 
     <confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete> 
     <!-- person details --> 
     <button @click="confirmDelete"> 
      <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       show: false, 
       deleteMsg: '' 
      } 
     }, 
     methods: { 
      confirmDelete() { 
       this.$refs.modal.show(); 
       this.deleteMsg: 'Are you sure you want to delete this person?' 
      } 
     } 
    } 
</script> 

ConfirmDelete.vue：

<template> 
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="media-body"> 
        <p>{{msg}}</p> 
       </div> 
      </div> 
     </div> 
    </div> 
<template> 

<script> 
    export default { 
     props: ['msg'], 
     methods: { 
      show: function() { 
       $('#modalDelete').modal('show') 
      }, 
     } 
    } 
</script>