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?
You should emit an event with name input :
@input="$emit('input', $event.target.value)"
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>