vue.js 2.0でブートストラップモーダルを開く

Question

誰かがvue 2.0でブートストラップモーダルを開く方法を知っていますか？ vue.jsの前にjQueryを使用してモーダルを開くだけです：$('#myModal').modal('show');

しかし、私はこれをVueで行うべきでしょうか？

ありがとうございます。

Answer 1

私はVue.js Modal exampleとBootstrap 3.* live demoのアマルガムを作った。

基本的に私はVue.jsモーダルの例を使用しましたが、Vue.js "html"部分をブートストラップのモーダルhtmlマークアップに置き換えました（私は思います）。私はブートストラップ3から外側のdivを剥がしてしまった。

関連するコードはブートストラップに関するものです。ブートストラップマークアップから外側のdivを取り除くだけで動作します。だから...

ugh、開発者のためのサイトと私は簡単にコードに貼り付けることはできませんか？これは私にとって深刻な問題でした。私だけですか？歴史に基づいて、私はばかげたばかだとコードに貼り付ける簡単な方法がありますので、助言してください。私が試してみるたびに、それはせいぜいフォーマットのひどいハックです。 私は要求された場合、どのようにしたかのサンプルjsfiddleを提供します。

Answer 2

マイコードはMichael Tranchidaの回答に基づいています。

HTML：

<div id="app"> 
    <div v-if="showModal"> 
    <transition name="modal"> 
     <div class="modal-mask"> 
     <div class="modal-wrapper"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" @click="showModal=false"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
       modal body 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </transition> 
    </div> 

    <button id="show-modal" @click="showModal = true">Show Modal</button> 
</div> 

JS：

new Vue({ 
    el: '#app', 
    data: { 
    showModal: false 
    } 
}) 

CSS：

.modal-mask { 
    position: fixed; 
    z-index: 9998; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, .5); 
    display: table; 
    transition: opacity .3s ease; 
} 

.modal-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
} 

そしてjsfiddle