v-select 구성 요소가 v-select 상자에 선택한 옵션을 표시하지 않습니다.

Question

v-select 컴포넌트를 사용할 때 문제가 발생했습니다. V-select 구성 요소는 선택한 항목을 표시하지 않습니다. 드롭다운에 옵션이 표시되지만 선택 후 선택 상자에 공백이 표시됩니다.

그게 문제야-

드롭다운 메뉴가 표시되지만 선택한 후에는 아무것도 표시되지 않습니다.

이렇게..텅 비어있습니다.

이게 내 코드야

<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 진술에서 정확히 무엇을 원하는지 모르겠습니다. 하지만 코드 위치를 변경하면

으아악

to

으아악

또는

으아악

선택 상자에 텍스트가 표시됩니다