CmsBlock and CmsElement computed, @input and @change not working

[thomaskral]

PHP Version

8.3

Shopware Version

6.6.0.2

Expected behaviour

The text field should render the value from the config. When the value gets updated by the user the value should get updated in the config.

• The computed setter should be triggered on each input change.
• The @input event should be triggered on each input change.
• The @change event should be triggered on value change.

Your example from the docs:

index.js

computed: {
        dailyUrl: {
            get() {
                return this.element.config.dailyUrl.value;
            },

            set(value) {
                this.element.config.dailyUrl.value = value;
            }
        }
    },
   
methods: {
    createdComponent() {
        this.initElementConfig('dailymotion');
    },

    onElementUpdate(value) {
        this.element.config.dailyUrl.value = value;

        this.$emit('element-update', this.element);
    }
}

html.twig

{% block sw_cms_element_dailymotion_config %}
    <sw-text-field
          v-model="dailyUrl"
          class="swag-dailymotion-field"
          label="Dailymotion video link"
          placeholder="Enter dailymotion link..."
          @input="onElementUpdate"
          @change="onElementUpdate">
    </sw-text-field>
{% endblock %}

Actual behaviour

• The default value from the config is displayed correctly
• The computed setter is never triggered on user input
• The @input event is never triggered on user input
• The @change event is never triggered in user input
• On @blur the value is reset to the default value

How to reproduce

Use the examples from your own docs:

https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html
https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-element.html

For text input my current workaround is using the @blur event to trigger onElementUpdate . But this is not working for select or radio elements. This makes those elements unusable at the moment.

[shopware-issue-bot]

We found the following existing issues which may help or are related to your topic:

• BeforeSystemConfigChangedEvent - Changed values ignored
• [GitHub] BugFix: Issue 3390 - Update data type for AfterLineItemQuantityChangedEvent::getItems()
• NEXT-31347 - BugFix: Update data type for AfterLineItemQuantityChangedEvent::getItems()
• Changing the value in text element did not store directly after pressing the save button in tab "Layout".
• Fixed typo in custom-cms-element how-to
• Problem with this.$super in component override
• Stat.watch triggers only on first setSavedSuccessful
• MailService: set variables in MailBeforeValidateEvent
• Fixes issue 2029 - Fix placeholderVisible state depending on isEmpty on mode switch

[kingschnulli]

Seems like the docs are outdated, this is a Vue2 to Vue3 migration thing. With 6.6 it should be used something like this:

    <sw-text-field
          v-model:value="dailyUrl"
          class="swag-dailymotion-field"
          label="Dailymotion video link"
          placeholder="Enter dailymotion link..."
          @update:value="onElementUpdate">
    </sw-text-field>

[mitelg]

thanks for bringing this up, I made an update for the docs ✌️

shopware/docs#1359