Bootstrap nicht modal mit vuejs

Question

zeigt Ich habe gerade Vuejs zu lernen begonnen, ich bin vor Problem mit Bootstrap-modal, wie das funktioniert tatsächlich mit vuejs

Ich bin verwirrt ich von JQuery Hintergrund komme, war es ziemlich geradlinig mit jquery aber Vue js scheint nicht mit modalen und andere derartige Bootstrap-Komponenten so einfach zu sein

<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; 
    } 
    } 
} 

ich einige andere, aber nichts versucht haben, scheint zu stehen, kann jemand bitte erklären, wie es

Answer 1

arbeiten in Ihrem modales Element, verwenden Sie v-if="openModal". Wenn Sie nur modal ohne zusätzliche Aktion ausblenden und anzeigen möchten, müssen Sie keine Funktion in der Methodeneigenschaft erstellen. Ihre openModal = true ist genug. aber wenn Sie, dass in Methoden tun möchten, sollten Sie so etwas schreiben:

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

daran erinnern, dass, wenn Sie eine Methode oder Eigenschaft in Vue-Instanz aufrufen, sollten Sie this Schlüsselwort verwenden.