【vuetify】v-select 无法正常显示,踩坑记录!

一、上代码

template

html 复制代码
<v-select
  v-model="editedUser.userRole"
  :items="roles"
  label="角色"
  item-value="value"
  :rules="[rules.required]"
></v-select>

script

javascript 复制代码
const editedUser = ref({
  userRole: 'customer' // 设置初始值为 'customer'
});

const rules = {
  required: value => !!value // 使用内置验证规则
};

const roles = [
  { text: '管理员', value: 'admin' },
  { text: '用户', value: 'customer' },
];

二、问题


三、解决

这是因为我没有写 item-title" ,加上去就好了

html 复制代码
<v-select
	v-model="editedUser.userRole"
	:items="roles"
	label="角色"
	item-title="text"
	item-value="value"
	:rules="[rules.required]"
></v-select>
相关推荐
Zestia39 分钟前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
PineappleCoder39 分钟前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法
KasukabeTsumugi42 分钟前
TypeScript:联合类型可以转化为元组类型吗?数组如何用联合类型逐项约束?
javascript
夏小花花1 小时前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript
掘金安东尼1 小时前
前端周刊第427期(2025年8月4日–8月10日)
前端·javascript·面试
老虎06271 小时前
JavaWeb前端(HTML,CSS具体案例)
前端·css·html
Mintopia1 小时前
一个月速成 AI 工程师:从代码小白到智能工匠的修炼手册
前端·javascript·aigc
Mintopia1 小时前
Next.js 全栈:接收和处理请求
前端·javascript·next.js
晓得迷路了2 小时前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js