Shopware 6 vue组件-如何更新组件的状态?

6vl6ewon  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(142)

我在配置页面上使用了自定义vue组件。在我的config.xml中,我有:

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

在我的自定义组件中,我有一段代码负责保存onchange操作:

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

当我改变一些东西并刷新页面时,一切都工作得很好,但是当我改变一些东西并单击保存按钮(配置页面上的默认按钮)时,我的更改就会被旧值覆盖。看起来Vue组件没有更新它的stage或其他东西。
有谁知道是什么问题吗?
我试图在这个“商店件组件”中创建一个vue组件并更新状态,但结果相同。

nimxete2

nimxete21#

这不是在扩展设置中自定义组件的预期方式。用户不会期望立即保存任何更改。他们会期望所做的任何更改仅在单击保存按钮后保存。由于您并没有真正更新DOM中设置的当前值,因此即使您有效地将更改持久化到数据库中,该值也保持不变。来自DOM的值保持不变,因此一旦点击保存,它将再次持久化旧值。
你需要在你的组件中实现一个prop value,除非你已经这样做了。它的值将成为您实际编辑的当前值,即items。对于任何更改,您都可以通过发出另一个更改事件来传播它们。这将导致DOM中的原始值被更新。然后,您还必须单击“保存”以永久保存对数据库的任何更改,这是预期的。
我只是假设items可以是一个数组。如果是其他情况,显然您应该相应地更改默认值。

Shopware.Component.register('hello-world', {
    template,

    props: {
        value: {
            type: Array,
            required: false,
            default: () => [],
        },
    },

    data() {
        return {
            items: this.value,
        };
    },

    watch: {
        value(value) {
            this.items = value;
        },
    },

    methods: {
        onChange(event) {
            this.$emit('change', this.items);
        },
    },
});

相关问题