【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>
相关推荐
be or not to be1 小时前
JavaScript 对象与原型
开发语言·javascript·ecmascript
前端 贾公子1 小时前
Git优雅使用:git tag操作
javascript·github
她超甜i3 小时前
css省略号展示,兼容性强,js判断几行,不需要定位
javascript·css·vue.js
毕设源码-朱学姐4 小时前
【开题答辩全过程】以 基于HTML5的购物网站的设计与实现为例,包含答辩的问题和答案
前端·html·html5
前端 贾公子4 小时前
release-it 使用指南
前端·javascript
摘星编程6 小时前
React Native + OpenHarmony:Modal确认取消弹窗
javascript·react native·react.js
xkxnq6 小时前
第四阶段:Vue 进阶与生态整合(第 47 天)(Vue 项目目录结构解析:每个文件夹的作用与规范)
前端·javascript·vue.js
意法半导体STM327 小时前
【官方原创】如何基于DevelopPackage开启安全启动(MP15x) LAT6036
javascript·stm32·单片机·嵌入式硬件·mcu·安全·stm32开发
奔跑的web.7 小时前
TypeScript namespace 详解:语法用法与使用建议
开发语言·前端·javascript·vue.js·typescript