Vuetify v3中v-select的item-text属性失效问题求助

核心问题分析 #

你遇到的空白选项问题，大概率是因为**item-text和item-value未使用Vue绑定语法**，同时需确保structures是数组类型。

具体修复步骤 #

1. 修正item-text和item-value的绑定方式 #

Vuetify3中，item-text和item-value需要接收数据对象的字段名字符串，必须用v-bind语法（简写为:）传递，否则Vue会把"name"当成模板变量而非字符串字面量。

修改后的组件代码：

<v-select 
  ref="structure" 
  :items="structures"  
  :item-text="'name'" 
  :item-value="'uuid'" 
  label="Structure" 
  v-model="listStructure" 
  return-object 
></v-select>

2. 确保structures是数组类型 #

v-select的items属性要求传入数组，如果接口返回的是单个对象，需将其转为数组：

// created钩子中的请求处理示例
async created() {
  const response = await fetch('/your-api-endpoint');
  const data = await response.json();
  // 统一转为数组格式
  this.structures = Array.isArray(data) ? data : [data];
}

3. 验证数据挂载是否正确 #

可在组件中临时添加调试代码，确认structures的数据结构：

<!-- 在v-select下方添加 -->
<pre>{{ structures }}</pre>

如果显示的是正确的数组对象，说明数据挂载正常，只需修正绑定语法即可。

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