【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>
相关推荐
我想说一句几秒前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
南屿im8 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
杨进军9 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心11 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
卸任19 分钟前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
WildBlue28 分钟前
阮一峰闭包:JavaScript最优雅的"背包"魔法!✨
前端·javascript
Dream耀31 分钟前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
zhanshuo33 分钟前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
小飞悟35 分钟前
React Hooks 编程:深入理解 useEffect 的执行机制与清理副作用
前端·javascript
我想说一句38 分钟前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js