【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>
相关推荐
打瞌睡的朱尤2 小时前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js
扶苏10023 小时前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
yanlele5 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤6 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
cc.ChenLy10 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
西门吹-禅10 小时前
node js 性能处理
开发语言·javascript·ecmascript
一只大侠的侠10 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
EstherNi11 小时前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
一只大侠的侠11 小时前
React Native for OpenHarmony:DatePicker 日期选择器组件详解
javascript·react native·react.js
JosieBook11 小时前
【Vue】15 Vue技术——Vue计算属性简写:提升代码简洁性的高效实践
前端·javascript·vue.js