@input not trigger when changing the value of model q-select



  • q-select
    	class="q-mb-md"
        dense
        outlined
        v-model="region"
        @filter="filterRegion"
        use-input
        input-debounce="0"
        :options="regionOptions"
        hint="Region"
        label="Select Region"
        bottom-slots
        :loading="loadingRegion"
        @input="loadProvince"
        :rules="[ val => !!val || 'Region is required']"
        >
        <template v-slot:no-option>
            <q-item>
                <q-item-section class="text-grey">
                    No results
                </q-item-section>
            </q-item>
        </template>
    </q-select>
    

    changing the value of region does not trigger @input event

    this.region  = {
     	value: “test”,
    	label: “test”
    }
    //this will not trigger @input event
    


  • @thekingrenz23

    changing the value of region does not trigger @input event

    That’s intended behavior. @input only watches changes initiated from the q-select component, not from other code.

    If you want to trigger on changes of the region data value you could use Vue’s watch mechanism:

    watch: {
            region: {
                deep: true  // because 'region' contains nested values
                handler: function(newValue, oldValue) {
                    console.log("newValue: " + newValue)
                }
             }
        }
    


  • @dobbel thanks a lot for the explanation and tips on how to solve it