如何使用 emit 將值傳遞給 v-model？

Question

我正在嘗試將值從 select 字段傳遞給 v-model，但代碼僅適用於 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>

在 select 字段中沒有返回選擇的值，我怎樣才能讓值 I select 也傳遞給子組件中的 v-model？

Answer 1

您應該發出名稱為input的事件：

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

Answer 2

我解決了它如下

 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>