<p>Lors de la création d'un nouvel élément CMS à utiliser dans l'éditeur WYSIWYG de Shopware, nous avons trois composants : un nommé <code>component</code> et un autre nommé <code> ;code>previewComponent</code>. </p> Le composant <p><code>configComponent</code> permet évidemment de sélectionner la configuration de l'élément, tandis que le composant <code>component</code> Par exemple, affichez le contenu sélectionné dans la section de configuration. Mon problème est qu'il ne met à jour la vue dans l'éditeur qu'après que l'utilisateur a cliqué sur le bouton Enregistrer, ce qui conduit à une mauvaise expérience utilisateur - il doit être mis à jour en temps réel. </p> <p><strong>Je pense que je dois d'une manière ou d'une autre <code>$emit</code>un événement de mise à jour</strong> après avoir sélectionné l'ID d'entité dans <code>configComponent</code>, puis transmettez le ID de l'entité sélectionnée pour le composant <code>component</code> </p> <p>Donc, dans la brindille du <code>component</code>, j'ai le code suivant : </p> <pre class="brush:js;toolbar:false;"> <config-component @entity-picked="entityPickedHandler" /> ≪/pré> <p>D'après ma compréhension de la documentation, cela doit être appelé lorsque l'événement <code>entity-picked</code> est émis depuis <code>configComponent</code> ; méthode "entityPickedHandler". </p> <p>Par exemple, il s'agit du gestionnaire d'événements dans <code>component</code> : </p> <pre class="brush:js;toolbar:false;">méthodes : { entitéPickedHandler (données) { console.log('Événement déclencheur :', données); } } ≪/pré> <p>Ensuite, émettez l'événement depuis <code>configComponent</code> : </p> <pre class="brush:js;toolbar:false;">calculé : { monEntité : { obtenir() { renvoie this.element.config.entity.value ; }, définir (valeur) { // this.$set(this.element.data, 'entityId', valeur); this.element.config.entity.value = valeur ; console.log('Essayez d'émettre un événement sélectionné par une entité'); this.$emit('entity-picked', valeur); } } } ≪/pré> <p>Évidemment, cela ne fonctionne pas car <code>console.log()</code> dans le gestionnaire <code>entityPickedHandler</code> Cependant, l'événement aurait dû être émis. </p>

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

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

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

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