如何使用<sw field>组件？

Question

我正试图通过sw-媒体字段获取上传图像文件的id。https://component-library.shopware.com/components/sw-media-field

<sw-media-field label="Profile Pic" :mediaId="user.mediaId"></sw-media-field>

这是正确的植入吗？

这些方法是否被认为是vue js事件？如何在商店软件中实现它们？我是否必须覆盖西南媒体领域的小树枝块或什么的@media-upload-finish？

此外，即使文件是上传，没有预览的上传图片是可见的？

<sw-media-field label="Profile Pic" :mediaId="user.mediaId">
<template v-slot:sw_media_field_upload_component>
<sw-upload-listener
:uploadTag="uploadTag"
autoUpload
@media-upload-finish="customAction">
</sw-upload-listener>
<sw-media-upload-v2
v-if="showUploadField"
variant="regular"
:allowMultiSelect="false"
:uploadTag="uploadTag">
</sw-media-upload-v2>
</template>
</sw-media-field>

Answer 1

有一个事件media-id-change你可以听。如果您需要侦听器设置id，也可以使用v-model绑定而不是mediaId属性来简化。

<sw-media-field
    :media-id="mediaId"
    label="Profile Pic"
    @media-id-change="onMediaIdChange"
/>

data() {
    return {
        mediaId: null,
    };
},

methods: {
    onMediaIdChange(value) {
        this.mediaId = value;
    },
},

或者简单的

<sw-media-field
    v-model="mediaId"
    label="Profile Pic"
/>