Vuetify 3 v-select组件placeholder与Vuetify 2表现不一致求助

在Vuetify 3中，当v-model绑定的值不在items数组内时，v-select会显示该无效值而非placeholder，这和Vuetify 2的行为不同。如果不想修改后端传来的原始值，可以用以下几种方案解决：

方案1：使用计算属性做双向代理 #

通过计算属性对绑定值做一层转换，无效值返回null让组件显示placeholder，同时保持原始数据不变：

<template>
  <v-select
    v-model="proxyValue"
    :items="items"
    variant="solo"
    density="compact"
    rounded
    dense
    placeholder="Standard"
  ></v-select>
</template>

<script setup>
import { ref, computed } from 'vue'

// 后端返回的原始值，无需修改
const value = ref('')
const items = ref(['Foo', 'Bar', 'Hoo', 'Coo'])

const proxyValue = computed({
  get() {
    // 若当前值不在items中，返回null触发placeholder显示
    return items.value.includes(value.value) ? value.value : null
  },
  set(newVal) {
    // 将选中的有效值同步回原始数据
    value.value = newVal
  }
})
</script>

这个方案的核心是用计算属性作为组件和原始数据的中间层，只在组件绑定层面做值转换，不会改动后端传来的value。

方案2：全局自定义指令（批量场景） #

如果多个v-select都需要这个逻辑，可以注册全局自定义指令，自动处理无效值：

// 在Vue应用初始化时注册指令
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data() {
    return {
      value: '',
      items: ['Foo', 'Bar', 'Hoo', 'Coo']
    }
  }
})

app.directive('select-fallback-placeholder', {
  mounted(el, binding, vnode) {
    const selectComponent = vnode.component
    const originalVal = binding.value

    // 监听值变化，自动处理无效值
    const unwatch = vnode.context.$watch(binding.expression, (newVal) => {
      if (!selectComponent.props.items.includes(newVal)) {
        selectComponent.value = null
      } else {
        selectComponent.value = newVal
      }
    })

    // 初始化时检查一次
    if (!selectComponent.props.items.includes(originalVal)) {
      selectComponent.value = null
    }

    // 组件卸载时清理监听
    el._unwatch = unwatch
  },
  unmounted(el) {
    el._unwatch?.()
  }
})

app.use(vuetify).mount('#app')

使用时只需给v-select加上指令：

<v-select
  v-model="value"
  v-select-fallback-placeholder
  :items="items"
  variant="solo"
  density="compact"
  rounded
  dense
  placeholder="Standard"
></v-select>

这个方案适合需要统一处理多个组件的场景，无需在每个组件里写重复的计算属性。

内容的提问来源于stack exchange，提问作者Rohít Jíndal