【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>
相关推荐
zhangyao94033019 小时前
uniapp动态修改 顶部导航栏标题和右侧按钮权限显示隐藏
前端·javascript·uni-app
aiguangyuan20 小时前
React 中什么是可中断更新?
javascript·react·前端开发
1***s63221 小时前
JavaScript微服务
javascript·微服务·devops
小云朵爱编程1 天前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
P***25391 天前
JavaScript部署
开发语言·前端·javascript
一只小阿乐1 天前
react 状态管理mobx中的行为模式
前端·javascript·react.js·mobx·vue开发·react开发
大雷神1 天前
DevUI 实战教程:从零构建电商后台管理系统(完整版)
前端·javascript·华为·angular.js
E***q5391 天前
JavaScript数据挖掘开发
开发语言·javascript·数据挖掘
滿1 天前
vue3 elementplus el-table toggleRowSelection使用方法
javascript·vue.js·elementui