【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>
相关推荐
扶苏10023 小时前
Vue 3 响应式原理深度解析
前端·javascript·vue.js
装不满的克莱因瓶5 小时前
Java7新特性:try-with-resources写法
java·前端·javascript·jdk·新特性·jdk7
半兽先生9 小时前
使用 retire.js 自动检测前端 JavaScript 库漏洞
开发语言·前端·javascript
扶苏100210 小时前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
专注VB编程开发20年11 小时前
WebView2 处理跨域访问限制,Frame脚本执行,难度比CEF大10倍
前端·javascript·.net
Highcharts.js12 小时前
Highcharts角度仪表(Angular Gauge)完全指南:从速度表到工业监控,一文学会gauge与solidgauge实战开发
javascript·angular.js·开发文档·highcharts·图表开发·实心仪表
css趣多多13 小时前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
强子感冒了15 小时前
JavaScript 零基础入门笔记:核心概念与语法详解
开发语言·javascript·笔记
FindYou.16 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue
星火开发设计16 小时前
标准模板库 STL:C++ 的利器 —— 容器、算法、迭代器
java·开发语言·数据结构·c++·算法·html