Reka bentuk semula paparan antara muka editor komponen CMS pengurusan Shopware

Question

Dalam mencipta elemen CMS baharu untuk digunakan dalam editor WYSIWYG Shopware, kami mempunyai tiga komponen: satu bernama component dan satu lagi bernama configComponent, dan satu lagi bernama < ;code>previewComponent.

configComponent jelas digunakan untuk memilih konfigurasi elemen, manakala komponen component Sebagai contoh, paparkan kandungan yang dipilih dalam bahagian konfigurasi. Masalah saya ialah ia hanya mengemas kini paparan dalam editor selepas pengguna mengklik butang simpan, yang membawa kepada pengalaman pengguna yang buruk - ia harus dikemas kini dalam masa nyata.

Saya rasa saya perlu entah bagaimana $emitacara kemas kini selepas memilih id entiti daripada configComponent, Kemudian lulus ID entiti yang dipilih kepada komponen komponen

Jadi, dalam ranting komponen, saya mempunyai kod berikut:

 

Dari pemahaman saya tentang dokumentasi, ini harus dipanggil apabila acara entiti dipilih dipancarkan daripada configComponent ; kaedah "entityPickedHandler". 
Sebagai contoh, ini ialah pengendali acara dalam komponen: 
kaedah: {
  entityPickedHandler(data) {
    console.log('Peristiwa pencetus:', data);
  }
}

Kemudian, keluarkan acara daripada configComponent: 
dikira: {
  myEntity: {
    dapatkan() {
      kembalikan this.element.config.entity.value;
    },

    set(nilai) {
      // this.$set(this.element.data, 'entityId', value);
      this.element.config.entity.value = nilai;
      console.log('Cuba untuk memancarkan acara yang dipilih entiti');
      this.$emit('entity-picked', value);
    }
  }
}

Jelas sekali, ini tidak berfungsi kerana console.log() dalam pengendali entityPickedHandler Walau bagaimanapun, peristiwa itu sepatutnya dipancarkan. 

Answer 1

Penetap/Penetap boleh menjadi agak rumit apabila melibatkan skop. Pendekatan biasa nampaknya betul. Mungkin cuba simpan entiti dalam sifat data dan tetapkan pendengar padanya.

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

Dikemas kini
Atau sebagai pendengar di dalam komponen component:

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

Data kemudiannya boleh dikemas kini daripada configComponent menggunakan:

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

Kemudian, dalam fail ranting configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model, kaedah myentity digunakan dalam v-model 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 %}