英文:
Shopware 6 vue component - how to update the state of the component?
问题
我正在在我的配置页面上使用自定义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组件没有更新其状态或其他什么原因。
有人知道可能是什么问题吗？
我尝试在这个“shopware组件”中创建一个Vue组件并更新状态，但结果相同。
英文:
I am using the custom vue component on my configuration page. In my config.xml I have:
<component name="hello-world">
<name>myComponent</name>
</component>
In my custom component, I have a code responsible for saving in onchange action:
onChange(event) {
this.systemConfigApiService.saveValues({ 'myPlugin.config.repeater': this.items}).then(() => {
this.systemConfigApiService.getValues('myPlugin.config').then((response) => {
this.log(response);
})
});
},
Everything works great when I change something and refresh the page but when I change something and click the save button(default button on the configuration page) then my changes have been overridden by old values. It looks like the Vue component has not updated its stage or something.
Does anyone know what can be the problem?
I tried to create a vue component in this "shopware component" and update the state but I have the same results.
答案1
得分: 1
这不是在扩展设置中自定义组件的预期方法。用户不会希望任何更改立即保存。他们会期望只有在点击保存按钮后才保存所做的任何更改。由于您没有真正更新DOM中设置的当前值，该值保持不变，即使您实际上将更改持久保存到数据库中。DOM中的值保持不变，因此当您再次点击保存时，它将再次保持旧值。
除非您已经这样做，否则需要在您的组件中实现一个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);
},
},
});
英文:
This is not the intended way to custom components in the extension settings. The user wouldn't expect any change to be saved immediately. They would expect that any changes made being saved only once they click the save button. Since you're not really updating the current value of the setting in the DOM, the value stays the same, even though you effectively persist changes to the database. The value from the DOM remains the same, hence why it will persist the old value back again, once you hit save.
You need to implement a prop value in your component unless you have done so already. It's value will become your current value, your items, that you're actually editing. On any changes you propagate them up by emitting another change event. This will then cause the original value in the DOM to be updated. You'll then also have to click save to persist any changes to the database permanently, as it is intended.
I just assumed items could be an array. If it is anything else you should change the default value accordingly, obviously.
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);
},
},
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论