重新設計Shopware管理CMS元件編輯器的介面視圖

Question

在創建一個新的CMS元素，用於Shopware的所見即所得編輯器中，我們有三個組件：一個名為component，另一個名為 configComponent，還有一個名稱為previewComponent。

configComponent顯然用於選擇元素的配置，而component元件用於更新編輯器中的視圖。例如，顯示在配置部分中選擇的內容。我的問題是，它只會在用戶點擊儲存按鈕後才會更新編輯器中的視圖，這會導致糟糕的用戶體驗 - 它應該即時更新。

我認為我需要在從configComponent選擇實體ID後以某種方式$emit一個更新事件，然後將所選實體的ID傳遞給component元件。

所以，在component的twig中，我有以下程式碼：

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

根據我對文件的理解，這應該在從configComponent發出entity-picked事件時調用component中的>事件時調用component中的>事件時調用component中的>事件中的> "entityPickedHandler"方法。

例如，這是component中的事件處理方法：

methods: {
  entityPickedHandler(data) {
    console.log('觸發事件：', data);
  }
}

然後，從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('嘗試發出entity-picked事件');
      this.$emit('entity-picked', value);
    }
  }
}

顯然，這不起作用，因為entityPickedHandler處理程序中的console.log()從未輸出。然而，事件應該已經發出了。

Answer 1

Getter/Setter在作用域方面可能有些棘手。通常的做法看起來是正確的。也許可以嘗試將實體儲存在一個資料屬性中，並在其上設定一個監聽器。

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

更新
或在component元件內部作為一個監聽器：

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

接著可以使用以下方式從configComponent更新資料：

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

然後，在configComponent的twig檔案中，myentity方法用於sw-entity-single-select的v-model：

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