vue-select组件选中选项后选择框不显示问题求助

你这问题根源很明确：用reduce把v-model转成了单个id值，但只自定义了下拉选项的展示模板，没给选中状态配置显示逻辑。组件拿到id后，找不到对应的显示文本，自然就空了。

下面给两个靠谱的解决办法：

办法一：自定义选中项的展示模板 #

给v-select加个selected-option插槽，通过当前选中的id从broadcasters数组里匹配对应的名称：

<template>
  <div>
    <v-select
      label="broadcast"
      v-model="broadcast_"
      :options="broadcasters"
      :reduce="(broadcast) => broadcast.id"
    >
      <template v-slot:option="option">{{ option.name }}</template>
      <!-- 新增选中项的展示逻辑 -->
      <template v-slot:selected-option="props">
        {{ broadcasters.find(item => item.id === props.value)?.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);
    },
  },
};
</script>

办法二：移除reduce，绑定整个对象（推荐） #

如果不是非得把v-model的值设为纯id，直接绑定整个广播对象更省心。另外注意你原来的label="broadcast"是无效的，得改成label="name"，对应选项对象里的名称字段：

<template>
  <div>
    <v-select
      label="name" <!-- 这里改对字段名，组件自动用name显示 -->
      v-model="broadcast_"
      :options="broadcasters"
      <!-- 去掉reduce，v-model直接绑定整个对象 -->
    >
      <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_: null, // 初始值设为null，匹配对象类型
    };
  },
  watch: {
    broadcast_(val) {
      if(val) console.log(val.id); // 需要id时直接取val.id就行
    },
  },
};
</script>

这个办法代码更简洁，后续维护也方便，优先推荐使用。

内容的提问来源于stack exchange，提问作者Arnab Maiti