【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>
相关推荐
高山我梦口香糖35 分钟前
[react]searchParams转普通对象
开发语言·前端·javascript
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_857600953 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600953 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL3 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据3 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
2402_857583493 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake4 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区4 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公4 小时前
从零开始详解js中的this(下)
前端·javascript·程序员