【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>
相关推荐
H@Z*rTE|i18 分钟前
vue首屏加载优化
前端·javascript·vue.js
Irene199120 分钟前
v-model 的本质,defineModel() 是 Vue 3.4 的重大改进
前端·javascript·html5
西西学代码38 分钟前
Flutter---构造函数
开发语言·javascript·flutter
invicinble1 小时前
关于对vue的认识
javascript·vue.js·ecmascript
EF@蛐蛐堂1 小时前
【vue】Vite 生态 5 个 “新玩具“
前端·javascript·vue.js
hzb666662 小时前
xd_day32-day40
java·javascript·学习·安全·web安全·tomcat·php
四千岁2 小时前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
你挚爱的强哥2 小时前
【sgCreateQrcode】自定义组件:模仿草料二维码做了一个简单的二维码制作组件
javascript·vue.js·elementui
进击的雷神2 小时前
攻克JSON嵌套HTML的双重解析难题:基于多层数据提取的精准爬虫设计
爬虫·html·json·spiderflow
kyriewen2 小时前
for...of 的秘密:迭代器与可迭代对象,你也能创造“可循环”的东西
前端·javascript·面试