Vue.js & Shopware 6：自定义CMS多文本框同步问题及传参咨询

你在基于Shopware 6改造cms-text元素实现多文本字段自定义CMS元素时，遇到修改一个文本框值，其他文本框同步变更的问题，并且想知道能否通过@input/@blur事件传递目标元素来解决。

问题根源 #

当前代码中，所有sw-text-editor的@input和@blur事件都调用同一个emitChanges函数，而这个函数会依次检查并更新productName、subtitle、information三个配置项的value为传入的内容——无论哪个编辑器触发事件，三个字段都会被同步修改，这就是问题的核心。

解决方案：通过事件传递目标字段标识 #

完全可以通过在@input/@blur事件中传递目标字段的标识来解决，具体修改如下：

1. 修改模板中的事件绑定

给每个sw-text-editor的事件绑定传入对应的字段名称，明确当前触发事件的目标字段：

<!-- 对应productName的文本编辑器 -->
<sw-text-editor
    v-model="element.config.productName.value"
    :allow-inline-data-mapping="true"
    sanitize-input
    @input="(content) => onInput(content, 'productName')"
    @blur="(content) => onBlur(content, 'productName')"
/>

<!-- 对应subtitle的文本编辑器 -->
<sw-text-editor
    v-model="element.config.subtitle.value"
    :allow-inline-data-mapping="true"
    sanitize-input
    @input="(content) => onInput(content, 'subtitle')"
    @blur="(content) => onBlur(content, 'subtitle')"
/>

<!-- 对应information的文本编辑器 -->
<sw-text-editor
    v-model="element.config.information.value"
    :allow-inline-data-mapping="true"
    sanitize-input
    @input="(content) => onInput(content, 'information')"
    @blur="(content) => onBlur(content, 'information')"
/>

2. 更新Vue逻辑代码

修改事件处理函数，接收字段名称参数，仅更新对应的目标配置项：

onBlur(content, field) {
    this.emitChanges(content, field);
},

onInput(content, field) {
    this.emitChanges(content, field);
},

emitChanges(content, field) {
    const targetConfig = this.element.config[field];
    // 仅当字段未被数据映射，且内容确实发生变化时更新
    if (content !== targetConfig.value && targetConfig.source !== 'mapped') {
        targetConfig.value = content;
        this.$emit('element-update', this.element);
    }
}

修改后，每个文本编辑器的输入/失焦事件只会更新对应的配置字段，不会再影响其他文本框的值。

内容的提问来源于stack exchange，提问作者NixH