如何使用vuejs與ajax進行通信後的數據集

Question

我試圖用Vuejs實現模態窗口。 下面的代碼顯示用戶上傳喜歡的照片後， 出現模式窗口，當前上傳的照片和新登記的照片顯示爲 當用戶按下「確認」按鈕時，它會確認。

但是，目前在上傳後用ajax獲取數據後，數據未在模態窗口中設置。 如何在模態窗口部分設置數據？

<template> 
<div> 
    <!-- upload --> 
    <div class="button__action"> 
     <button type="button" @click="uploadData(originalData.image)">upload</button> 
    </div> 
    <!-- Modal window --> 
    <modal name="modal-view"> 
     <div> 
      <div class="modal__box" v-if="modalList.list"> 
       <img :src="modalList.list.url"> 
       <p class="image__name">{{modalList.list.name}}</p> 
      </div> 

      <button type="button" @click="submit">Confirm</button> 
     </div> 
    </modal> 
</div> 
</template> 

<script> 
import { post } from './handler/api' 
import { toFormat } from './handler/form' 

export default { 
    props: { 
     originalData: { 
      type: Object, 
      required: true, 
     } 
    }, 
    data: function(){ 
     return { 
      modalList : { 
       list : [], 
      }, 
     } 
    }, 
    methods: { 
     showModal() { 
      this.$modal.show('modal-view'); 
     }, 
     uploadData() { 
      const form = toFormat({image: this.originalData.image}) 
      post(`/api/upload/`, form) 
       .then((res) => { 
        if(res.data) { 
         Vue.set(this.$data, 'modalList', res.data.list); 
         this.$modal.show('modal-view'); 
        } 
       }) 
       .catch((err) => { 
        //error 
       }) 
     }, 
     submit() { 

     } 
    } 
} 
</script> 

Answer 1

試試這個：

uploadData() { 
    var vm = this; 
    post(`/api/upload/`, toFormat({image: this.originalData.image})).then(res => { 
    if(res.data) { 
     vm.modalList = res.data.list; 
     this.$modal.show('modal-view'); 
    } 
    }) 
}