【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>
相关推荐
英俊潇洒美少年11 分钟前
JS 事件循环(宏/微任务) ↔ Vue ↔ React** 三者的关系
javascript·vue.js·react.js
Greg_Zhong15 分钟前
Js中异步编程的知识扩展【异步有哪些、如何执行、宏任务和微任务等】
开发语言·javascript
我命由我1234528 分钟前
React - 路由样式丢失问题、路由观察记录、路由传递参数
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
英俊潇洒美少年29 分钟前
React类组件和函数组件的所有核心区别
前端·javascript·react.js
大家的林语冰42 分钟前
《前端周刊》React 败北,虾皇登基,OpenClaw 勇夺 GitHub 第一开源软件
前端·javascript·github
533_1 小时前
[vue3] 动态引入本地静态资源(URL)
前端·javascript·vue.js
EliseL1 小时前
SuperMap iClient3D for WebGL 如何实时汇报相机位置天气情况
javascript·3d·html·webgl
EF@蛐蛐堂2 小时前
【vue】新前端工具链Vite+ Alpha
前端·javascript·vue.js
SuperEugene2 小时前
Vue3 组合式函数(Hooks)封装规范实战:命名 / 输入输出 / 复用边界 + 避坑|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
cmd2 小时前
JS深浅拷贝全解析|常用方法+手写实现+避坑指南(附完整代码)
前端·javascript