【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>
相关推荐
bin91534 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的日历(Calendar),日历_天气预报日历示例(CalendarView01_18)
前端·javascript·vue.js·ecmascript·deepseek
江城开朗的豌豆5 分钟前
JavaScript篇:反柯里化:让函数'反悔'自己的特异功能,回归普通生活!
前端·javascript·面试
江城开朗的豌豆12 分钟前
JavaScript篇:数字千分位格式化:从入门到花式炫技
前端·javascript·面试
十年砍柴---小火苗35 分钟前
原生js操作元素类名(classList,classList.add...)
javascript·css·css3
站在风口的猪11087 小时前
《前端面试题:CSS对浏览器兼容性》
前端·css·html·css3·html5
JohnYan8 小时前
Bun技术评估 - 04 HTTP Client
javascript·后端·bun
拉不动的猪9 小时前
TS常规面试题1
前端·javascript·面试
穗余10 小时前
NodeJS全栈开发面试题讲解——P5前端能力(React/Vue + API调用)
javascript·vue.js·react.js
一心赚狗粮的宇叔11 小时前
web全栈开发学习-01html基础
前端·javascript·学习·html·web
爱编程的鱼11 小时前
如何在 HTML 中添加按钮
前端·javascript·html