Shopware 6 vue component - how to update the state of the component?

Question

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.

Answer 1

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);
        },
    },
});