【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>
相关推荐
tyro曹仓舒21 分钟前
干了10年前端,才学会使用IntersectionObserver
前端·javascript
mine_mine1 小时前
油猴脚本拦截fetch和xhr请求,实现修改服务端接口功能
javascript
坚持就完事了2 小时前
CSS-5:盒子模型
前端·css·html
一 乐2 小时前
考公|考务考试|基于SprinBoot+vue的考公在线考试系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·课程设计
林太白2 小时前
跟着TRAE SOLO全链路看看项目部署服务器全流程吧
前端·javascript·后端
特级业务专家2 小时前
把 16MB 中文字体压到 400KB:我写了一个 Vite 字体子集插件
javascript·vue.js·vite
先生沉默先3 小时前
NodeJs 学习日志(8):雪花算法生成唯一 ID
javascript·学习·node.js
起这个名字3 小时前
Webpack——插件实现的理解
前端·javascript·node.js
橙 子_3 小时前
我本以为代码是逻辑,直到遇见了HTML的“形”与“意”【一】
前端·html
二川bro3 小时前
第51节:Three.js源码解析 - 核心架构设计
开发语言·javascript·ecmascript