【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>
相关推荐
NightCyberpunk5 分钟前
HTML、CSS
前端·css·html
lv程序媛18 分钟前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
ZwaterZ19 分钟前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
蒟蒻的贤1 小时前
vue学习11.21
javascript·vue.js·学习
初遇你时动了情1 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
zongzi_4942 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
麻辣_水煮鱼3 小时前
vue数据变化但页面不变
前端·javascript·vue.js
一条晒干的咸魚3 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo3 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
过期的H2O24 小时前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6