【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>
相关推荐
页面魔术22 分钟前
⭐看完vite纪录片才知道尤大有多屌(上)
前端·javascript·vue.js
UpgradeLink32 分钟前
Electron 项目使用官方组件 electron-builder 进行跨架构打包
前端·javascript·electron
Moment1 小时前
别再让 JavaScript 抢 CSS 的活儿了,css原生虚拟化来了
前端·javascript·css
晓得迷路了1 小时前
栗子前端技术周刊第 110 期 - shadcn/create、Github 更新 npm 令牌政策、Deno 2.6...
前端·javascript·css
前端小端长1 小时前
项目里满是if-else?用这5招优化if-else让你的代码清爽到飞起
开发语言·前端·javascript
笨小孩7871 小时前
Flutter跨平台开发全解析:从原理到实战的深度指南
javascript·react native·react.js
AI_56781 小时前
Vue3组件通信的实战指南
前端·javascript·vue.js
UpgradeLink1 小时前
Electron项目使用electron-updater与UpgradeLink接入参考
开发语言·前端·javascript·笔记·electron·用户运营
m0_616188491 小时前
JS文件批量下载并打包成ZIP的功能
开发语言·javascript·ecmascript
xiaoxue..1 小时前
React 新手村通关指南:状态、组件与魔法 UI
前端·javascript·react.js·ui