如何使用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'); 
    } 
    }) 
}