如何在vue組件中單擊保存按鈕後關閉模態？

我VUE成分是這樣的：如何在vue組件中單擊保存按鈕後關閉模態？

<template> 
    <div ref="modal" class="modal" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <form> 
        ... 
        <div class="modal-footer"> 
         ... 
         <button type="button" class="btn btn-success" @click="addPhoto"> 
          Save 
         </button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     ... 
     methods: { 
      addPhoto() { 
       const data = { id_product: this.idProduct }; 
       this.$store.dispatch('addImageProduct', data) 
        .then((response) => { 
         this.$parent.$options.methods.createImage(response) 
        }); 
      }, 
     } 
    } 
</script>

如果我按一下按鈕addPhoto，它會調用addPhoto方法。

用於調用ajax的addPhoto方法。 ajax響應後，它會通過createImage方法響應父組件

運行後，模態不能關閉。點擊保存按鈕後模態關閉

如何在調用createImage方法後關閉模態？

來源

2017-07-14 Success Man

你應該[發出事件] （https://vuejs.org/v2/guide/components.html#Custom-Events） m模態組件並讓父級執行'addPhoto'動作並關閉模態。 –

你目前如何打開模式？ – aprouja1

@ aprouja1，'data-target =「＃modal-add」data-toggle =「modal」' –

這樣你就不能一起使用Bootstrap和Vue。每個人都想控制DOM，並且他們會踩到彼此的腳趾。要一起使用它們，您需要wrapper components以便Bootstrap可以控制組件內的DOM，並且Vue可以與包裝器交談。

幸運的是，有一個項目爲Bootstrap小部件製作了包裝組件。它是Bootstrap-Vue。按下OK按鈕後，它的模態會自動關閉。我已經將他們的模態例子變成了模糊的東西，就像你想要做的事情。

new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    clearName() { 
 
     this.name = ''; 
 
    }, 
 
    addPhoto(e) { 
 
     console.log("dispatch the request"); 
 
    } 
 
    } 
 
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" /> 
 
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css" /> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<script src="//unpkg.com/[email protected]/dist/polyfill.min.js"></script> 
 
<script src="//unpkg.com/[email protected]/dist/js/tether.min.js"></script> 
 
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script> 
 

 
<div id="app"> 
 
    <div> 
 
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn> 
 

 
    <!-- Modal Component --> 
 
    <b-modal id="modal1" title="Whatever" ok-title="Save" @ok="addPhoto" @shown="clearName"> 
 

 
     <form @submit.stop.prevent="submit"> 
 
     Form stuff... 
 
     </form> 
 

 
    </b-modal> 
 
    </div> 
 
</div>

來源

2017-07-14 17:10:31

<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>

如果我理解你想要什麼，然後，添加此數據駁回=「模式」取其按鈕，你要使用的關閉模式..假設你有一個按鈕上傳圖像上你想要上傳的圖像，以及關閉模式，然後添加data-dismiss =「模態」的按鈕屬性，像我上面所示...

來源

2017-08-01 12:25:20 rajesh

如何在vue組件中單擊保存按鈕後關閉模態？

回答

相關問題