Shopware 6自定义CMS元素配置值无法更新问题求助

我正在创建Shopware 6自定义CMS元素，严格按照官方文档步骤操作，但无法更新配置值。输入varName值并点击完成后，该值会恢复为默认值。以下是我的代码：

customelement/index.js #

import './component'; 
import './preview';
import './config';
Shopware.Service('cmsService').registerCmsElement({
   name: 'customelement',
   label: 'sw-cms.elements.customelement.label',
   component: 'sw-cms-el-customelement',
   configComponent: 'sw-cms-el-config-customelement',
   previewComponent: 'sw-cms-el-preview-customelement',
   defaultConfig: {
      varName: {
        source: 'static',
        value: 'hello raj'
     }
  }
});

customelement/component/index.js #

import template from './sw-cms-el-customelement.html.twig';
import './sw-cms-el-customelement.scss';
Shopware.Component.register('sw-cms-el-customelement', {
    template,

    mixins: [
      'cms-element'
    ],

  computed: {
      varName() {
          return this.element.config.varName.value;
      }
  },

  created() {
      this.createdComponent();
  },

  methods: {
      createdComponent() {
           this.initElementConfig('customelement');
      }
  }
});

customelement/config/index.js #

import template from './sw-cms-el-config-customelement.html.twig';
Shopware.Component.register('sw-cms-el-config-customelement', {
   template,

   mixins: [
      'cms-element'
   ],

   computed: {
      varName() {
         return this.element.config.varName.value;
      }
   },

   created() {
      this.createdComponent();
   },

   methods: {
      createdComponent() {
         this.initElementConfig('customelement');
      },

      onElementUpdate(element) {
         this.$emit('element-update', element);
      }
  }
});

customelement/config/sw-cms-el-config-customelement.html.twig #

{% block sw_cms_element_customelement_config %}
<sw-text-field
    class="swag-customelement-field"
    label="value"
    placeholder="Enter value..."
    v-model="varName"
    @element-update="onElementUpdate">
</sw-text-field>
{% endblock %}

问题原因及修复方案 #

你的代码核心问题在于配置组件的varName计算属性只有getter，没有setter，v-model需要双向绑定能力，无法直接修改只读的计算属性，导致输入的新值无法同步到element.config中，最终点击完成后恢复默认值。

修改后的配置组件代码：

customelement/config/index.js

import template from './sw-cms-el-config-customelement.html.twig';
Shopware.Component.register('sw-cms-el-config-customelement', {
   template,

   mixins: [
      'cms-element'
   ],

   computed: {
      varName: {
          get() {
              return this.element.config.varName.value;
          },
          set(value) {
              // 更新配置值
              this.element.config.varName.value = value;
              // 触发元素更新事件，通知CMS保存修改
              this.$emit('element-update', this.element);
          }
      }
   },

   created() {
      this.createdComponent();
   },

   methods: {
      createdComponent() {
         this.initElementConfig('customelement');
      }
  }
});

customelement/config/sw-cms-el-config-customelement.html.twig

移除不必要的@element-update监听，因为setter中已经触发了更新事件：

{% block sw_cms_element_customelement_config %}
<sw-text-field
    class="swag-customelement-field"
    label="value"
    placeholder="Enter value..."
    v-model="varName">
</sw-text-field>
{% endblock %}

说明：

1. 给varName计算属性添加setter，当v-model修改值时，会调用setter更新element.config.varName.value，同时触发element-update事件通知CMS保存配置变更。
2. 移除模板中的@element-update绑定，避免重复触发更新事件。
3. 组件部分的代码无需修改，因为它只需要读取配置值。

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