Shopware 6自定义Vue组件状态异常：配置保存值被覆盖求助

问题重现 #

在Shopware 6配置页使用自定义Vue组件，config.xml配置如下：

<component name="hello-world">
   <name>myComponent</name>
</component>

组件内部通过onChange手动调用API保存值：

onChange(event) {
  this.systemConfigApiService.saveValues({ 'myPlugin.config.repeater': this.items}).then(() => {
     this.systemConfigApiService.getValues('myPlugin.config').then((response) => {
       this.log(response);
      })
     });
},

修改后刷新页面正常，但点击配置页默认保存按钮时，新值会被旧值覆盖。

核心原因 #

Shopware 6的配置页默认保存按钮是基于全局表单模型（systemConfigForm）来提交所有配置项的。你当前的实现只单独调用API保存了组件的新值，但没有将组件内部的状态同步到这个全局表单模型中对应的字段。当点击默认保存时，表单提交的是模型里的旧值，因此会覆盖你之前单独保存的新数据。

解决思路 #

必须让自定义组件的状态和Shopware配置表单的模型双向绑定：

1. 组件通过props接收对应配置项的初始值（Shopware会自动通过value属性传递）
2. 组件内部状态变化时，通过$emit('input', newValue)通知父组件更新表单模型
3. 可选：如果需要实时保存，仍可调用API，但此时表单模型已同步为新值，默认保存不会再产生冲突

调整后的代码示例 #

1. 更新config.xml，为组件绑定值属性

<component name="hello-world">
    <name>myComponent</name>
    <config>
        <property name="value">
            <default>[]</default>
            <flag>required</flag>
        </property>
    </config>
</component>

2. 调整自定义组件逻辑

// 定义props接收配置值
props: {
    value: {
        type: Array,
        default: () => []
    }
},

// 基于props初始化内部状态
data() {
    return {
        items: [...this.value]
    };
},

// 监听props变化，同步内部状态
watch: {
    value(newVal) {
        this.items = [...newVal];
    }
},

methods: {
    onChange(event) {
        // 同步内部状态到全局表单模型
        this.$emit('input', this.items);
        
        // 可选：实时保存到后端
        this.systemConfigApiService.saveValues({ 'myPlugin.config.repeater': this.items})
            .then(() => {
                this.systemConfigApiService.getValues('myPlugin.config')
                    .then((response) => {
                        this.log(response);
                    });
            });
    }
}

关键说明 #

通过v-model的双向绑定逻辑（value props + input事件），组件的状态会实时同步到Shopware的配置表单模型中。此时点击默认保存按钮，提交的就是最新的组件值，不会再出现覆盖问题。

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