【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>
相关推荐
SuperEugene11 分钟前
前端-后端-产品-项目-运维:互联网项目协作全流程解析
运维·前端·javascript
A黄俊辉A15 分钟前
openlayers+vue初学注意点
前端·javascript·vue.js
南篱19 分钟前
从回调地狱到优雅异步:JavaScript 异步编程的完整演进之路
前端·javascript·面试
rmst24 分钟前
列表的拖动排序动画原理
javascript·react.js·动效
undeflined34 分钟前
EnvManage - 多环境开发代理管理工具
前端·javascript·node.js
三小河37 分钟前
从零实现ollama本地大模型可视化+内网穿透
前端·javascript·面试
Cg1362691597440 分钟前
JS-对象-array数组
开发语言·前端·javascript
weixin456227191 小时前
省市区镇村五级联动
前端·javascript·chrome
智海观潮1 小时前
只用一周时间通过AI工具重写Next.js,Cloudflare推出vinext重建前端开发边界
开发语言·javascript·人工智能·大模型·web
窝子面1 小时前
二十三、第三方登录
前端·javascript·html