vue-select未选中时如何返回null而非空字符串且选中仅返回id字段

你编写的reduce函数逻辑不生效，是因为vue-select的reduce函数仅在存在有效选中项时才会触发执行，未选中的清空状态下，组件默认返回的空字符串不会走reduce的处理逻辑，所以你写的entry === ''判断分支永远不会执行。

有两种常用实现方式，按需选择即可：

方式1：搭配clearable属性 + 自定义v-model转换 #

给组件加clearable属性支持清空，同时通过计算属性做空值转换，你直接使用answer作为业务绑定值即可：

<template>
  <v-select 
    v-model="selectedValue"
    clearable
    placeholder="Pick one (or not)"
    :options="[{id: 1, label: 'A'}, {id: 2, label: 'B'}]"
    :reduce="entry => ({id: entry.id})"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: ''
    }
  },
  computed: {
    answer: {
      get() {
        return this.selectedValue === '' ? null : this.selectedValue
      },
      set(val) {
        this.selectedValue = val === null ? '' : val
      }
    }
  }
}
</script>

方式2：使用@input事件主动处理空值 #

不想用计算属性的话，可以手动监听input事件处理返回值：

<template>
  <v-select 
    :value="answer"
    @input="val => answer = val === '' ? null : {id: val.id}"
    clearable
    placeholder="Pick one (or not)"
    :options="[{id: 1, label: 'A'}, {id: 2, label: 'B'}]"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      answer: null
    }
  }
}
</script>

注意：两种方式都需要给组件加clearable属性，才能支持手动清空选中项回到未选状态。

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