Redesign the interface view of Shopware management CMS component editor

Question

In creating a new CMS element for use in Shopware's WYSIWYG editor, we have three components: one named component and another named configComponent, and another named previewComponent.

The

configComponent is obviously used to select the configuration of the element, while the component component is used to update the view in the editor. For example, display the content selected in the configuration section. My problem is that it only updates the view in the editor after the user clicks the save button, which leads to a bad user experience - it should update in real time.

I think I need to somehow $emitan update event after selecting the entity id from configComponent, Then pass the ID of the selected entity to the component component.

So, in twig of component, I have the following code:

 <config-component @entity-picked="entityPickedHandler" />

From my understanding of the documentation, this should be called in component when the entity-picked event is emitted from configComponent "entityPickedHandler" method.

For example, this is the event handler in component:

methods: {
  entityPickedHandler(data) {
    console.log('Trigger event:', data);
  }
}

Then, emit the event from configComponent:

computed: {
  myEntity: {
    get() {
      return this.element.config.entity.value;
    },

    set(value) {
      // this.$set(this.element.data, 'entityId', value);
      this.element.config.entity.value = value;
      console.log('Try to emit entity-picked event');
      this.$emit('entity-picked', value);
    }
  }
}

Obviously, this doesn't work because console.log() in the entityPickedHandler handler never outputs. However, the event should have been emitted.

Answer 1

Getter/Setter can be a little tricky with scope. The usual approach seems to be correct. Maybe try storing the entity in a data property and setting a listener on it.

data() {
    return {
        entity: this.element.config.entity.value,
    };
},

watch: {
    entity(value) {
        this.$emit('entity-picked', value);
    },
},

methods: {
    entityChanged(value) {
        this.element.config.entity.value = value;
        this.entity = value;
    },
},

renew
Or as a listener inside the component component:

watch: {
    'element.data.entityId': {
        handler() {
            this.entityId = this.element.data.entityId;
        },
        deep: true,
    }
}

The data can then be updated from configComponent using:

computed: {
    myentity: {
        get() {
            return this.element.config.myEntity.value;
        },

        set(value) {
            this.element.config.myentity.value = value;
            this.$set(this.element.data, 'entityId', value);
            this.$emit('element-update', this.element);
        }
    }
},

Then, in the twig file of configComponent, the myentity method is used in the v-model## of sw-entity-single-select #：

{% block sw_cms_element_team_box_config %}
    <sw-entity-single-select label="testing my entity" entity="myexample_entity" v-model="myentity" />
{% endblock %}