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

如何在与vuejs进行ajax通信后进行数据集

1 个答案: