I've searched around and can't find a solution to my issue so I'm hoping someone can help.

I have created a couple of custom form components but I still have to revert back to 'original' code to fulfill some tasks as I can't find a way to use @change on a custom select.

This is what I'm doing normally...

Custom select component - with props and methods omitted:

<v-select v-if="inputType === 'select'"
                  @input="updateValue($event)"
                  :background-color="backgroundColor ? 'backgroundColor' : 'white'"
                  class="rounded-lg"
                  :clearable="clearable"
                  :chips="chips"
                  color="accent2"
                  :deletable-chips="deletableChips"
                  :disabled="disabled || isFormReadOnly"
                  :error="error"
                  :error-messages="errorMessages"
                  filled
                  flat
                  hide-details="auto"
                  :items="items"
                  :item-text="itemText && itemText"
                  item-value="value"
                  :label="label"
                  :multiple="multiple"
                  :outlined="!outlined && !isFormReadOnly"
                  :return-object="returnObject"
                  :small-chips="smallChips"
                  :value="value"/>

...and I call it like this:

<app-input input-type="select"
           class="rounded-lg mb-4"
           :class="$vuetify.breakpoint.width >= 600 && 'pl-2'"
           :error="errors.type"
           :is-form-read-only="isFormReadOnly"
           :items="['Drill', 'Emergency']"
           label="Type"
           v-model="form.type"/>

...which works just fine, but I just can't call a function on change using @change.

Any ideas?

CodePudding user response：

Did you try in select component:

@change="$emit('change', $event.target.value)"

CodePudding user response：

I think you can try $emit or write a watch in the instance