【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>
相关推荐
林shir11 分钟前
3.3-Web前段开发-JavaScript(AI)
开发语言·前端·javascript
duanyuehuan16 分钟前
vue 项目中.d.ts
前端·javascript·vue.js
小粉粉hhh19 分钟前
记录前端菜鸟的日常——Pdf.js与双指缩放
前端·javascript·pdf
pas13630 分钟前
27-mini-vue provide-inject
前端·javascript·vue.js
h_jQuery38 分钟前
vue项目中使用canvas实现手写文字(批注)功能
开发语言·前端·javascript
winfredzhang41 分钟前
[全栈实战] 从零打造一个“沉浸式”私人云端阅读器 (Node.js + EPUB.js)
javascript·css·node.js·html·extjs·epub阅读器
duanyuehuan1 小时前
|| ?. ?? ??= 4种操作符
前端·javascript·vue.js
特严赤傲1 小时前
H5 页面在微信浏览器里调用微信支付 demo
javascript·微信·jsapi
研☆香1 小时前
html界面的树形菜单介绍与制作
前端·microsoft·html
qq_401967381 小时前
element-plus table组件 封装列隐藏功能,并非 v-if 或 v-for,通过tableRef 与样式控制
javascript·vue.js·elementui