引導模式的不vuejs

Question

顯示我剛開始學Vuejs，我現在面臨的問題與引導模式，怎麼這其實與vuejs

我很困惑，我從jQuery的背景的作品，這是很簡單的用jQuery但Vue公司的js似乎不容易與莫代爾等這樣的引導部件

<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關鍵字。