Shopware 6 <sw-media-list-selection-v2> component not updating after media selection-CodePudding

I'm working on slider CMS element where every slide has image gallery, for selecting images I use <sw-media-list-selection-v2> and <sw-media-modal-v2> components. Each slide is created as <sw-collapse>. In my config/index.js I keep object, 'mediaItems', where key is slide ID and property is array of image entities selected by mentioned components.

The problem is: while selected images are being added to my object property they are not displayed in component, when I collapse and expand slide then selected images are displayed but not immediately after being selected.

I think problem is that Vue "don't know" that array bound to object property was changed but I don't know how to make it work.

In default Shopware 6 image slider array of images, declared in data(), is directly set to <sw-media-list-selection-v2> and it works fine by in my case array is in object and it's not working as I would like it to.

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

CodePudding user response：

If I understand your problem correctly it is caused by the mediaItems property not being mutated reactively. The component then won't "know" about the changes unless it is re-rendered. Try using the reactive vue setter instead:

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