【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>
相关推荐
芳草萋萋鹦鹉洲哦34 分钟前
【vue/js】文字超长悬停显示的几种方式
前端·javascript·vue.js
开发者小天1 小时前
React中的 闭包陷阱
前端·javascript·react.js
国服第二切图仔2 小时前
Electron for 鸿蒙pc项目实战之tab标签页组件
javascript·electron·harmonyos·鸿蒙pc
Neptune12 小时前
深入浅出:理解js的‘万物皆对象’与原型链
前端·javascript
阿迷不想上班2 小时前
windows自动任务定期执行
javascript
盗德2 小时前
最全音频处理WaveSurfer.js配置文档
前端·javascript
Heo2 小时前
关于Gulp,你学这些就够了
前端·javascript·面试
祈澈菇凉3 小时前
Next.js 零基础开发博客后台管理系统教程(八):提升用户体验 - 表单状态、加载与基础验证
前端·javascript·ux
有意义3 小时前
从日常使用到代码实现:B 站签名编辑的 OOP 封装思路与实践
javascript·代码规范·ecmascript 6