【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>
相关推荐
ShenJLLL3 小时前
vue部分知识点.
前端·javascript·vue.js·前端框架
前端 贾公子7 小时前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(下)
前端·html
qq_242188633211 小时前
3389端口内网转发概述
前端·经验分享·html
Never_Satisfied11 小时前
在JavaScript / HTML中,数组查找第一个符合要求元素
开发语言·javascript·html
HelloReader12 小时前
Tauri 2 创建项目全流程create-tauri-app 一键脚手架 + Tauri CLI 手动接入
前端·javascript·vue.js
shix .12 小时前
旅行网站控制台检测
开发语言·前端·javascript
henry10101013 小时前
DeepSeek生成的网页小游戏 - 迷你高尔夫
前端·javascript·游戏·html
薛一半14 小时前
React的组件
前端·javascript·react.js
薛一半14 小时前
React三大属性之props
前端·javascript·react.js
用户57573033462415 小时前
🔥 前端必考!AJAX 数据请求全解析,async true/false 区别一次搞懂
javascript