I'm having trouble passing the selected value from a select field to v-model. Currently, the code only seems to work with 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>The select field is not returning the selected value. How can I ensure that the value I select is properly passed to the v-model in the child component as well?