Vuetify v-select how to call change only when user select an option?

Question

Currently the v-select change event will fires multiple times during user typing keywords. Is there any event will be only fired if user has select an option or press Enter to select an option. I don't want the change event be fired during user typing keywords.

input is total same as change

huan feng
– huan feng

2022-09-14 07:39:18 +00:00
Commented Sep 14, 2022 at 7:39 — huan feng
– huan feng, Commented Sep 14, 2022 at 7:39

Alexandr Guravskiy · Accepted Answer · 2023-04-09 10:48:33Z

2

      <v-select
        v-model="valueGender"
        :items="items"
        :rules="[v => !!v || 'Item is required']"
        label="gender"
        @update:modelValue="setSameCode('gender', valueGender)"
      ></v-select>

It work for me

answered Apr 9, 2023 at 10:48

Alexandr Guravskiy

1315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Tripodi · Accepted Answer · 2022-09-14 04:38:35Z

1

V-Select#Events

Unfortunately, it looks like the change event only has a parameter that is the value of selected option. There is not event passed through for you to check what actually raised the change event. However, looking at the link above, there are other events you can use.

There is a keydown event listed here that you might be able to leverage. It takes in a keyboard event, you should be able to check what keyboard event was raise i.e. 'Enter'. There are also other events such as mousedown or mouseup.

answered Sep 14, 2022 at 4:38

Joe Tripodi

911 silver badge4 bronze badges

1 Comment

huan feng Over a year ago

yes, currently i choose to wrap the handler in a debounce method

Collectives™ on Stack Overflow

Vuetify v-select how to call change only when user select an option?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related