【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>
相关推荐
whinc10 分钟前
Node.js技术周刊 2026年第17周
前端·javascript
nbsaas-boot11 分钟前
100万门店级分货系统架构设计
前端·javascript·vue.js
爱上好庆祝1 小时前
学习js的第2天
前端·css·学习·html·css3
l1t1 小时前
DeepSeek v4辅助生成的单文件SQL查询示例页面
javascript·数据库·sql
笋笋~1 小时前
el-tree 拖拽事件隔离:实现句柄独立控制,区域分离
javascript·vue.js·elementui
Aotman_3 小时前
Element UI 表格搜索高亮
前端·javascript·vue.js·ui·elementui
Dillon Dong3 小时前
【系列主题】拯救 OOM 与构建中断:Next.js 在 Docker 中的静态生成(SSG)避坑指南
开发语言·javascript·docker
han_hanker4 小时前
下拉模糊搜索多选, 编辑,详情问题
开发语言·javascript·ecmascript
yqcoder4 小时前
[特殊字符] Vue 3 中 Keep-Alive 对生命周期的影响:深度解析
前端·javascript·vue.js
jiayong234 小时前
第 33 课:任务看板视图(按状态分列)与本地持久化
开发语言·前端·javascript·学习