【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>
相关推荐
Hamm7 小时前
不想花一分钱玩 OpenClaw?来,一起折腾这个!
javascript·人工智能·agent
Setsuna_F_Seiei7 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
英俊潇洒美少年7 小时前
react如何实现 vue的$nextTick的效果
javascript·vue.js·react.js
隔壁小邓11 小时前
前端Vue项目打包部署实战教程
前端·javascript·vue.js
TON_G-T11 小时前
javascript中 Iframe 处理多端通信、鉴权
开发语言·前端·javascript
周淳APP11 小时前
【JS之闭包防抖节流,this指向,原型&原型链,数据类型,深浅拷贝】简单梳理啦!
开发语言·前端·javascript·ecmascript
kyriewen11 小时前
console.log 骗了我一整个通宵:原来它才是时间旅行者
前端·javascript·chrome
冴羽12 小时前
在浏览器控制台调试的 6 个秘密技巧
前端·javascript·chrome
前端Hardy12 小时前
别再手动调 Prompt 了!这款开源神器让 AI 输出质量提升 300%,支持 Claude、GPT、Gemini,还免费开源!
前端·javascript·面试
敲代码的约德尔人12 小时前
ES2025 JavaScript 新特性预览
javascript