Компонент Shopware 6 vue — как обновить состояние компонента?
Я использую пользовательский компонент 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 не обновил свою сцену или что-то в этом роде.
Кто-нибудь знает, в чем может быть проблема?
Я попытался создать компонент vue в этом «компоненте магазина» и обновить состояние, но у меня те же результаты.
Ответы 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);
},
},
});