Vue添加新项目时v-select显示undefined的解决求助

问题原因分析 #

1. track-by属性配置错误：你当前把track-by设为project.kierownik_id，这是错误用法。track-by应指定items数组中每个选项的唯一标识字段（比如你的_id），用于组件识别选项唯一性，而非绑定当前选中值。
2. 缺少占位符配置：初始状态下project.kierownik_id为null，未设置placeholder时，组件无法正确渲染空状态，进而显示undefined。
3. 选项匹配逻辑异常：若formattedUsers结构不符合预期，或初始值null无对应匹配项，组件会出现异常显示。

解决方案 #

1. 修正track-by并添加占位符 #

调整track-by为选项的唯一标识字段，同时设置占位符文本：

<v-select
  v-model="project.kierownik_id"
  :items="formattedUsers"
  :item-props="itemProps"
  item-text="_id"
  item-value="_id"
  label="kierownik:"
  track-by="_id"
  placeholder="请选择负责人"
></v-select>

2. 确保formattedUsers结构正确 #

确认formattedUsers是包含_id字段的数组，示例结构如下：

// 示例formattedUsers结构
formattedUsers: [
  { _id: 'user_001', name: '张三' },
  { _id: 'user_002', name: '李四' }
]

如果想显示更友好的文本，建议将item-text改为名称字段（如name），保持item-value="_id"，这样v-model绑定_id值的同时，组件显示名称，体验更合理。

3. 初始化数据兜底 #

若formattedUsers是异步加载的，给它设置初始空数组避免数据未返回时的异常：

data() {
  return {
    project: {
      kierownik_id: null,
    },
    dataCorrect: true,
    users: {},
    formattedUsers: [], // 初始化为空数组
    error: { show: false, message: '' },
    confirmDelete: false
  }
},

验证修改效果 #

修改后，初始状态下v-select会显示设置的占位符文本，选定选项后绑定对应_id值，提交新项目时不会再出现undefined的显示问题。

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