如何將返回值存儲在組件道具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) }}'"觸發到 controller 並且 controller 在執行一些邏輯后返回 Z466DEEC76ECDF5FCA6D38571F634 值

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

我想將來自 controller 的$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'