Error on onChange, onInput and Javascript on twig component and page : Shopware 6

Shopware 6 (English) Administration (EN)
, , ,
1

Hi everyone, I hope you’re doing well!

I’ve just started developing extensions on Shopware 6, and for the past two weeks, I’ve been facing a persistent problem: I can’t retrieve the new values when my fields are modified. Whether I’m using v-model, @change, :change, @input, or :input.

The various functions are executed correctly when the page loads (I checked using console.log), but once the page is loaded, I no longer have access to these functions. When inspecting, I notice that functions for these events exist and are the same for all:

e => {
  if (e._vts) {
    if (e._vts <= n.attached) return
  } else e._vts = Date.now();
  t2(function(e, t) {
    if (!F(t)) return t; {
      let n = e.stopImmediatePropagation;
      return e.stopImmediatePropagation = () => {
        n.call(e), e._stopped = !0
      }, t.map(e => t => !t._stopped && e && e(t))
    }
  }(e, n.value), t, 5, [e])
}

I should mention that I didn’t create this; it’s entirely generated automatically.

The complete twig file for the page is:

<sw-page class="custom-product-detail">
    <template #smart-bar-actions>
        <sw-button :routerLink="{ name: 'custom.product.index' }">
            {{ $tc('custom-product.detail.canceButtonText') }}
        </sw-button>

        <sw-button-process
            :isLoading="isLoading"
            :processSuccess="processSuccess"
            variant="primary"
            @process-finsih="saveFinish"
            @click="onClickSave">
            {{ $tc('custom-product.detail.saveButtonText') }}
        </sw-button-process>
    </template>

    <template #content>
        <sw-card-view>
            <sw-card v-if="custom_product" :isLoading="isLoading">
                <sw-container columns="1fr" gap=30px>
                    <sw-text-field 
                        v-model="custom_product.name" 
                        :label="$tc('custom-product.detail.customProductLabelText')"
                        placeholder="Entrez le titre du formulaire"
                        @input="setCustomProductLabel"
                    ></sw-text-field>
                    <sw-checkbox-field 
                        v-model="custom_product.in_step" 
                        :label="$tc('custom-product.detail.customProductInStepLabel')"
                    ></sw-checkbox-field>
                </sw-container>
                <sw-entity-multi-select
                    v-if="custom_product.products"
                    v-model="custom_product.products"
                    :label="$tc('custom-product.detail.selectProductLabel')"
                ></sw-entity-multi-select>
            </sw-card>
        </sw-card-view>
    </template>
</sw-page>

and the complete index.js file for the same page:

import template from './custom-product-detail.html.twig'

const { Component, Mixin } = Shopware;

Component.register('custom-product-detail', {
    template, 

    inject: [
        'repositoryFactory'
    ],

    mixins: [
        Mixin.getByName('notification')
    ],

    metaInfo() {
        return {
            title: this.$createTitle(),
        }
    },

    data() {
        return {
            custom_product_repository: null,
            custom_product : null,
            isLoading: false, 
            processSuccess:false
        }
    },

    watch: {
        'custom_product.name' : function (newValue) {
            console.log('Nouvelle valeur:', newValue)

            this['custom_product.name'] = newValue
        }
    },

    created(){
        this.createdComponent()
    },

    methods: {
        setCustomProductLabel(input) {
            const newValue = input.target.value || "null"
            console.log('Nouvelle valeur:', newValue)

            this.custom_product.name = newValue
        },

        createdComponent(){
            this.custom_product_repository = this.repositoryFactory.create('custom_product')
            this.getCustomProduct()  
        },

        getCustomProduct(){
            this.custom_product_repository.get(this.$route.params.id, Shopware.Context.api).then((entity) => {
                this.custom_product = entity
            })
        },

        onClickSave(){
            this.isLoading=true;
            
            this.custom_product_repository.save(thsi.custom_product, Shopware.Context.api).then(() => {
                this.getCustomProduct()
                this.isLoading = false
                this.processSuccess = true
            }).catch((exception) => {
                this.isLoading = false
                this.createNotificationError({
                    title: this.$tc('custom-product.detail.errorTitle'),
                    message: exception
                })
            })
        },

        saveFinish(){
            this.processSuccess = false
        }
    }
})

I’m using Shopware 6.6.0, installed with Docker (Dockware).

I also want to mention that I’ve tested with checkboxes, switch-buttons, and input-text fields, but even the console.log statements don’t appear. In the example above, I don’t have @change, but I’ve tried it, as well as :change.

Thank you very much for your time; any advice would be greatly appreciated.