How to pass value to v-model with emit?

Question

I'm trying to pass value from a select field to v-model but the code only works in a v-text-field.

 <script> export default { name: 'FormSelect', props: { modelValue: { type: [String, Number], default: '', }, label: { type: String, default: '', }, items: { type: Array, }, }, model: { prop: 'modelValue', event: 'change', }, }; </script>

 <template> <div> <v-select:label="label" v-bind:value="modelValue" @input.native="$emit('change', $event.target.value)":items="items" ></v-select> </div> </template>

 <template> <div class="form"> <v-flex xs10 sm8 md6 lg5> <v-card> <FormTitle /> <ModalFormMessage /> <v-form ref="form" class="d-flex flex-column"> <FormSelect v-model="vulnerabilities.vulnerability" label="Vulnerability":items="items.vulnerability" /> <FormInputs v-model="vulnerabilities.evidence" label="Eevidence" type="file" /> <FormInputs v-model="vulnerabilities.solution" label="Solution" type="text" /> <FormBtns /> </v-form> </v-card> </v-flex> </div> </template>

In the select field is not returning the selected value, how can I make the value I select be passed to the v-model in the child component too?

Answer 1

You should emit an event with name input :

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

Answer 2

I solved it as follows

 methods: { changeSelect: function () { this.$emit('input', this.modelValue); }, },

 <template> <div> <v-select:label="label" @input="changeSelect()" v-model="modelValue":items="items" ></v-select> <p>{{ modelValue }}</p> </div> </template>