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

[thekingrenz23]

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

[dobbel]

@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)
            }
         }
    }

[thekingrenz23]

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