How to pass value to v-model with emit?-CodePudding

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 >
        <v-flex xs10 sm8 md6 lg5>
            <v-card>
                <FormTitle />
                <ModalFormMessage />
                <v-form ref="form" >
                    <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?

CodePudding user response：

You should emit an event with name input :


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

CodePudding user response：

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>