Vuetify中v-select组件无法访问嵌套JSON值的问题

问题：使用Vuetify的v-select组件时，通过itemProps方法访问嵌套对象属性item.user.first_name会报错，但访问顶层属性item.bio正常，数据结构中明明存在user嵌套对象。

问题根源 #

1. 子组件中同时在data和computed里定义了selected，导致变量冲突，computed的selected会覆盖data中的定义，而父组件初始值trainer是空字符串''，v-select初始化时会把这个空字符串作为item传入itemProps方法——此时item是字符串，不是对象，自然没有user属性，触发报错。
2. 未对item的类型做判断，当v-select处于未选中状态时，传入的item可能是非对象值（比如空字符串、null），直接访问属性会抛出错误。

解决步骤 #

1. 删除子组件data中定义的selected，仅保留computed版本的selected，避免状态冲突。
2. 将父组件的trainer初始值改为null（空字符串会被v-select当作有效选项处理，null才表示未选中状态）。
3. 在itemProps方法中添加空值和类型判断，结合可选链操作符?.防止嵌套属性访问报错。

修改后的代码 #

父组件

<template>
  <Comp v-model="trainer" class="mt-10 mb-20 text" />
</template>

<script>
import Comp from './Comp.vue'
export default {
  components: {
    Comp,
  },
  data() {
    return {
      trainer: null,
    }
  },
}
</script>

子组件Comp

<template>
  <v-select
    label="trainer"
    v-model="selected"
    v-bind="$attrs"
    :item-props="itemProps"
    :items="items"
  ></v-select>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      items: [
        {
          id: 7,
          user: {
            first_name: 'john',
            last_name: 'Doe',
            phone_number: '0910087634',
            email: 'test@gmail.com',
          },
          specializations: null,
          bio: '  hello',
          image: '',
          birthdate: '2024-01-01',
          gender: 'male',
          experience_years: 7,
        },
      ],
    }
  },
  methods: {
    itemProps(item) {
      if (!item || typeof item !== 'object') {
        return { title: '', subtitle: '' }
      }
      return {
        title: item.user?.first_name || '',
        subtitle: item.id || '',
      }
    },
  },
  computed: {
    selected: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
}
</script>

说明 #

• 移除重复的selected定义：computed属性已经负责处理v-model的双向绑定，重复定义会导致初始化时的状态混乱。
• 初始值设为null：让v-select明确识别未选中状态，避免将空字符串当作有效选项传入itemProps。
• 可选链操作符?.：即使item.user为null或undefined，也不会抛出错误，而是返回undefined，配合|| ''兜底为空白字符串，保证界面正常渲染。

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