如何将返回值存储在组件道具vue js中

Question

我有这个用于媒体上传的组件

<media-upload
        :ref="'cover_uploader'"
        :collection="'cover'"
        :url="'{{ route('admin.upload.media', $folder) }}'"
        :accepted-file-types="''"
        :max-number-of-files="5"
        :max-file-size-in-mb="100"
        :accepted-file-types="''"
></media-upload>

并且该路由:url="'{{ route('admin.upload.media', $folder) }}'" 触发到控制器，并且该控制器在执行一些逻辑后返回一个 json 值。

public function uploadMedia(Request $request, $folder="uploads")
{
    if ($request->file('file')) {
        $media = MediaUploaderFacade::fromSource($request->file('file'))
                ->toDirectory($folder)
                ->upload();

        return response()->json($media);
    }
    return response()->json( 'Incorrect file', 422);
}

我想将来自控制器的$media 存储在我的组件中，以执行类似这样的其他操作。

<media-upload
        :jsonHandler="jsonData(// I want to get that $media in here as a parameter)"
        :ref="'cover_uploader'"
        :collection="'cover'"
        :url="'{{ route('admin.upload.media', $folder) }}'"
        :accepted-file-types="''"
        :max-number-of-files="5"
        :max-file-size-in-mb="100"
        :accepted-file-types="''"
></media-upload>

Answer 1

我将创建一个发出 API 请求并存储响应的方法，例如：

async uploadMedia(){ const {data} = await makeAPICallToUploadMedia(); this.media= data; }

然后只需在媒体上传元素中：jsonHandler='media'