Shopware 6插件问题：新建条目需点击两次保存按钮

问题现象 #

开发Shopware 6插件时，新建系统条目需点击两次保存按钮才能完成保存操作，首次点击无预期效果。

相关代码 #

Twig模板中的保存按钮 #

<sw-button-process
    v-bind:isLoading="isLoading"
    v-bind:processSuccess="processSuccess"
    variant="primary"
    @process-finish="saveFinish"
    @click="onClickSave">
    {{ $t('plugin-entity.saveButtonText') }}
</sw-button-process>

保存逻辑方法 #

onClickSave() {
    this.isLoading = true;

    this.repository
            .save(this.blacklist, Shopware.Context.api)
            .then(() => {
                this.getBlacklist();
                this.isLoading = false;
                this.processSuccess = true;
            })
            .catch((exception) => {
                this.isLoading = false;
                this.createNotificationError({
                    title: this.$t('plugin-entity.errorTitle'),
                    message: exception
                });
            });
},

问题分析与解决方案 #

1. sw-button-process组件事件绑定错误 #

sw-button-process是Shopware内置的流程按钮组件，本身设计用于处理异步流程，不应直接绑定@click事件。直接绑定@click会干扰组件自身的状态管理逻辑，导致首次点击时组件未正确进入流程状态，需二次点击触发。

修复方案：
移除@click="onClickSave"绑定，改用组件的@process事件触发保存逻辑：

<sw-button-process
    v-bind:isLoading="isLoading"
    v-bind:processSuccess="processSuccess"
    variant="primary"
    @process="onClickSave"
    @process-finish="saveFinish">
    {{ $t('plugin-entity.saveButtonText') }}
</sw-button-process>

2. processSuccess状态未重置 #

在then回调中设置this.processSuccess = true后，未在saveFinish方法中重置为false。sw-button-process组件会依赖processSuccess状态判断流程是否完成，若状态未重置，后续点击会被组件忽略，需二次点击才能触发新的流程。

修复方案：
实现saveFinish方法重置状态：

saveFinish() {
    this.processSuccess = false;
}

3. 实体实例初始化问题 #

若this.blacklist是普通JavaScript对象而非通过Shopware仓库创建的实体实例，首次调用repository.save时可能无法正确触发持久化操作。Shopware的repository.save要求传入的是通过repository.create(Context)创建的实体对象，否则可能出现无响应或静默失败的情况。

修复方案：
确保新建条目时，this.blacklist是正确的实体实例：

// 在新建条目的初始化逻辑中
this.blacklist = this.repository.create(Shopware.Context.api);

4. 错误提示信息不规范 #

catch回调中直接传入exception作为错误信息，而Shopware的createNotificationError需要字符串类型的消息。若exception是Error对象，会导致提示信息异常，用户无法感知首次保存失败的原因，误以为未触发保存操作。

修复方案：
修改错误提示为exception.message：

.catch((exception) => {
    this.isLoading = false;
    this.createNotificationError({
        title: this.$t('plugin-entity.errorTitle'),
        message: exception.message || this.$t('plugin-entity.defaultErrorMessage')
    });
});

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