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