Die V-Select-Komponente zeigt die ausgewählte Option im V-Select-Feld nicht an

Question

Bei der Verwendung der V-Select-Komponente ist ein Problem aufgetreten. Die V-Select-Komponente zeigt das ausgewählte Element nicht an. Sie zeigt die Optionen im Dropdown-Menü an, aber nach der Auswahl wird im Auswahlfeld ein leeres Element angezeigt.

Das ist das Problem-

Das Dropdown-Menü wird angezeigt, aber nach der Auswahl wird nichts angezeigt.

So...es ist leer.

Das ist mein 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

我不知道您的 :reduce 语句到底想要什么。 但是如果你改变你的代码在哪里

label="broadcast"

至

label="name"

或

label="id"

您将在选择框中看到文本