は、ブートストラップは、私はちょうどVuejsを学ぶために始めているvuejs

Question

に表示されないモーダル、私はこれは実際に私はjQueryの背景から来ています混乱していますvuejs

でどのように機能するか、ブートストラップモーダルで問題に直面しています、それはかなりまっすぐ進むましたjqueryのが、VueのJSのdoesntは、モーダルおよび他のそのようなブートストラップ・コンポーネント

<button class="btn btn-primary" @click="openModal = true"></button> 

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>This is a small modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 


export default { 
    data() { 
    return { 
     openModal : false; 
    } 
    }, 
methods: { 
    openModel : function(){ 
     openModal = true; 
    } 
    } 
} 

で簡単に、私はいくつかの他のを試してみましたが、何も動いていないようにみえ、誰かがそれはあなたの中に

Answer 1

を動作する方法を説明してくださいすることができていることのように見えるとモーダル要素、v-if="openModal"。追加アクションなしでモーダルを非表示にして表示したい場合は、メソッドのプロパティで関数を作成する必要はありません。 openModal = trueで十分です。あなたが方法でそれをしたい場合は、あなたはこのような何かを書く必要があります。

methods: { 
 
    showModal: function() { 
 
    this.openModal = true 
 
    } 
 
}

あなたはVueのインスタンスでメソッドまたはプロパティを呼び出す場合、あなたはthisキーワードを使用する必要があることを覚えておいてください。