Refonte de la vue de l'interface de l'éditeur de composants CMS de gestion Shopware

Question

Lors de la création d'un nouvel élément CMS à utiliser dans l'éditeur WYSIWYG de Shopware, nous avons trois composants : un nommé component et un autre nommé ;code>previewComponent.

Le composant

configComponent permet évidemment de sélectionner la configuration de l'élément, tandis que le composant component 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.

Je pense que je dois d'une manière ou d'une autre $emitun événement de mise à jour après avoir sélectionné l'ID d'entité dans configComponent, puis transmettez le ID de l'entité sélectionnée pour le composant component

Donc, dans la brindille du component, j'ai le code suivant :

 
≪/pré>
D'après ma compréhension de la documentation, cela doit être appelé lorsque l'événement entity-picked est émis depuis configComponent ; méthode "entityPickedHandler". 
Par exemple, il s'agit du gestionnaire d'événements dans component : 
méthodes : {
  entitéPickedHandler (données) {
    console.log('Événement déclencheur :', données);
  }
}
≪/pré>
Ensuite, émettez l'événement depuis configComponent : 
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é>
Évidemment, cela ne fonctionne pas car console.log() dans le gestionnaire entityPickedHandler Cependant, l'événement aurait dû être émis. 

Answer 1

Getter/Setter peut être un peu délicat en matière de cadrage. L'approche habituelle semble être correcte. Essayez peut-être de stocker l'entité dans une propriété de données et d'y définir un écouteur.

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

Mise à jour
Ou en tant qu'auditeur à l'intérieur du composant component :

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

Les données peuvent ensuite être mises à jour depuis configComponent en utilisant :

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

Ensuite, dans le fichier twig de configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model, la méthode myentity est utilisée dans le v-model de 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 %}