I encountered a problem when using the v-select component. The V-select component doesn't show the selected item... it shows the options in the dropdown but after selecting it shows blank in the select box.
This is where the problem lies-
The drop-down menu is displayed..but nothing is displayed after selection.
Like this..it's blank.
This is my code
<template> <div> <v-select label="broadcast" v-model="broadcast_" :options="broadcasters" :reduce="(broadcast) => broadcast.id" > <template v-slot:option="option">{{ option.name }}</template> </v-select> </div> </template> <script> import Vue from "vue"; import vSelect from "vue-select"; Vue.component("v-select", vSelect); export default { data() { return { broadcasters: [ { name: "ABC Live", id: 1, }, { name: "Disney", id: 3, }, { name: "24x7 Broadcast", id: 4, }, ], broadcast_: "", }; }, watch: { broadcast_(val) { console.log(val); //It prints desire data (i.e broadcast id) }, }, }; </script>
P粉0020233262023-12-25 21:19:23
I don't know what exactly you want with your :reduce
statement.
But if you change your code where
label="broadcast"
to
label="name"
or
label="id"
You will see text in the selection box