选择<sw-media-list-selection-v2>媒体后，购物软件 6 组件未更新

Question

我正在开发滑块CMS元素，其中每张幻灯片都有图像库，为了选择图像，我使用<sw-media-list-selection-v2>和<sw-media-modal-v2>组件。每张幻灯片都创建为<sw-collapse>。在我的config/index.js中，我保留了对象"mediaItems"，其中键是幻灯片ID，属性是由上述组件选择的图像实体的数组。

问题是：当选定的图像被添加到我的对象属性时，它们不会显示在组件中，当我折叠和展开幻灯片时，选定的图像会显示，但不会在被选中后立即显示。

我认为问题在于Vue"不知道"绑定到对象属性的数组已更改，但我不知道如何使其工作。

在默认情况下，在data((中声明的Shopware6图像滑块数组直接设置为<sw-media-list-selection-v2>，在我的情况下，数组位于对象中，但它没有按我希望的方式工作。

<sw-media-list-selection-v2 
:entity-media-items="mediaItems[sliderItem.id]" 
:entity="entity" 
:upload-tag="uploadTag" 
:default-folder-name="defaultFolderName" 
@upload-finish="onImageUpload($event, sliderItem)" 
@item-remove="onItemRemove($event, sliderItem)" 
@open-sidebar="onOpenMediaModal"
/>

data() {
return {
initialFolderId: null,
entity: this.element,
mediaItems: {},
mediaModalOpen: false
};
},

onMediaSelectionChange(mediaItems, sliderItem) {
mediaItems.forEach(item => {
sliderItem.mediaItems.push({
mediaId: item.id,
mediaUrl: item.url
});
});
this.mediaItems[sliderItem.id].push(...mediaItems);
this.emitUpdateEl();
},

emitUpdateEl() {
this.$emit('element-update', this.element);
},

Answer 1

如果我正确理解您的问题，它是由mediaItems属性没有反应性突变引起的。然后该组件将不会"；知道"；关于更改，除非重新渲染。尝试使用反应式vue setter代替：

this.$set(this.mediaItems, sliderItem.id, [...this.mediaItems[sliderItem.id], ...mediaItems]);