【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>
相关推荐
前端大白话几秒前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
一千柯橘11 分钟前
Nestjs 解决 request entity too large
javascript·后端
举个栗子dhy32 分钟前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript
宁静_致远35 分钟前
React Native 技术栈:基于 macOS 开发平台的 iOS 应用开发指南
前端·javascript·react native
H5开发新纪元36 分钟前
VS Code 插件开发实战:代码截图工具
javascript·visual studio code
DevUI团队1 小时前
超越input!基于contentediable实现github全局搜索组件:从光标定位到输入事件的全链路设计
前端·javascript
天天扭码1 小时前
前端必备技能 | 使用rem实现移动页面响应式
前端·javascript·css
Momoyouta1 小时前
draggable拖拽列表与虚拟列表结合实例
前端·javascript
magic 2451 小时前
深入解析Promise:从基础原理到async/await实战
开发语言·前端·javascript
海盗强1 小时前
babel和loader的关系
前端·javascript