Le composant v-select n'affiche pas l'option sélectionnée dans la zone v-select

Question

J'ai rencontré un problème lors de l'utilisation du composant v-select. Le composant V-select n'affiche pas l'élément sélectionné... il affiche les options dans la liste déroulante mais après la sélection, il apparaît vide dans la zone de sélection.

C'est ça le problème-

Le menu déroulant s'affiche... mais rien ne s'affiche après l'avoir sélectionné.

Comme ça... c'est vide.

C'est mon 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>

Answer 1

Je ne sais pas exactement ce que vous voulez avec votre déclaration :reduce. Mais si vous changez l'endroit où se trouve votre code

label="broadcast"

à

label="name"

ou

label="id"

Vous verrez le texte dans la zone de sélection