首页 / 技术问答 / Vue.js问答列表 / 问答详情

Vue.js 更新 Shopware 管理 CMS 组件中的编辑器视图

在创建要在Shopware的所见即所得编辑器中使用的新CMS元素时，我们有三个组件:一个名为component，另一个名为configComponent，第三个名为previewComponent.

显然，configComponent用于 Select 元素的配置，而component组件用于更新编辑器中的视图.例如，显示在配置部分中 Select 的内容.我的问题是，它只会在用户单击保存按钮后更新编辑器中的视图，这会造成糟糕的用户体验-它应该实时更新.

I think I need to somehow 100 an update event当已经从configComponent中 Select 了实体ID时，然后将所选实体的ID传递给component组件.

所以，我在component条小 twig 中有以下几点:

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

根据我对文档的解释，当entity-picked事件从configComponent发出时，这应该在component中调用"entityPickedHandler"方法.

例如，这是component中的事件处理程序方法:

methods: {
  entityPickedHandler(data) {
    console.log('Event triggered:', 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('Trying to emit entity-picked event');
      this.$emit('entity-picked', value);
    }
  }
}

这显然是不起作用的，因为console.log()in entityPickedHandler处理程序从未输出.但是，该事件应该正在发出.

推荐答案

Getter/Setter可能会对范围有一点怀疑.总的来说，这种方法看起来是正确的.也许可以try 将实体存储在数据属性中，并对其进行监视.

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

Update
Or as a watcher from within the component 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);
        }
    }
},

然后将myentity法用于configComponent‘S小枝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 %}

Vue.js相关问答推荐

VueUse onClickOutside不支持右键单击

保持页面重新加载之间的状态

使用 Nuxt 动态获取文件夹中的图像路径

webpack vue-loader 配置

是否可以让 html-webpack-plugin 从 css 生成