'"v-on with no argument expects an object value" facing this error in quasar selector when focus into the field

here is my code, options array updated in created hook based on api response and response of api is array of object and v-model value is also updated in created hook. this selector is of input type and also filter the data based on input type from options array. hope so this chunk of code is enough to explain.

<q-select
                    ref="registeredCountry"
                    for="registeredCountry"
                    color="olab-brand-blue"
                    v-model="registeredAddress.country"
                    use-input
                    fill-input
                    hide-selected
                    :options="countryOptions"
                    @filter="filterCountryList"
                    emit-value
                    option-label="countryName"
                    option-value="countryName"
                    @update:model-value="resetStateAndCityFields('registeredAddress')"
                    map-options
                  >
                  </q-select>


Solution 1:[1]

I got exactly the same Vue warning with one of my q-selects, after migrating it (unchanged) from Vue 2/Quasar 1 to Vue 3/Quasar 2. The same q-select code worked without warnings on the older levels. The warning is very unspecific from a Quasar point of view.

However, I found a hint on https://github.com/quasarframework/quasar/issues/8898 to eliminate this warning, which helped to resolve the issue in my case.

The reason for the warning was in my case due to the use of q-chips with q-items for the options in the q-select. Those q-items for the q-select options used "v-on='scope.itemEvents'", together with "v-bind='scope.itemProps'", which was the recommended combination in Quasar 1/Vue 2.

In Quasar 2/Vue 3 the "v-on='scope.itemEvents' is no longer necessary (if used, it causes this Vue warning). Just search for all "v-on='scope.itemEvents'" in your template code, then drop (i.e. delete) those "v-on=...", but keep the "v-bind=...".

This eliminates the above Vue warnings (which otherwise come up for every selectable option in your q-select).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1