View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo
本文介绍 View UI (iview)中的组件 Form表单的 Select选择框验证无效问题
问题详细内容是,Select选择框选中后,表单验证不通过,提示没有选中
代码如下
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option v-for="item in citys" :key="item.id" :value="item.id">
{
{item.name}}
</Option>
</Select>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
// citys: [
// {id: '1', name: '北京'},
// {id: '2', name: '上海'},
// {id: '3', name: '沈阳'},
// {id: '4', name: '青岛'},
// ],
citys: [
{id: 1, name: '北京'},
{id: 2, name: '上海'},
{id: 3, name: '沈阳'},
{id: 4, name: '青岛'},
],
formValidate: {
city: '',
},
ruleValidate: {
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>
运行效果
出现这个问题的原因是绑定在 Select上的 Option 的 value是 Number类型,因为 citys数组中的数据的 id 类型是 Number类型,如果改成 String类型就不会出现这个问题了。
官网文档上说 value 值单选时只接受 String 或 Number,但是加上 Form表单验证则不通过,不知道这是否算bug,笔者使用的 View UI (iview)的版本是4.2.0,可能升级更高版本就解决了,这里笔者没有升级尝试,日后有时间会进行尝试,现在在此记录一下
下图是 Select 官网 API
将 value 绑定的值类型改成 String类型,则没有选中后验证不通过问题
代码如下
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option v-for="item in citys" :key="item.id" :value="item.id">
{
{item.name}}
</Option>
</Select>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
citys: [
{id: '1', name: '北京'},
{id: '2', name: '上海'},
{id: '3', name: '沈阳'},
{id: '4', name: '青岛'},
],
// citys: [
// {id: 1, name: '北京'},
// {id: 2, name: '上海'},
// {id: 3, name: '沈阳'},
// {id: 4, name: '青岛'},
// ],
formValidate: {
city: '',
},
ruleValidate: {
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>
运行效果
至此完
文章浏览阅读1.2w次。1. Getting a bunch of 404 when Initializers option is activated# systemctl status kube-apiserverDec 19 12:43:30 rmxk8sctl01 kube-apiserver[7012]: I1219 12:43:30.665129 7012 wrap.go:42] GET /apis/admis..._read-only range request
文章浏览阅读1.3k次。句法分析句法分析(syntactic parsing)是自然语言处理中的关键技术之一,它是对输入的文本句子进行分析以得到句子的句法结构的处理过程。对句法结构进行分析,一方面是语言理解的自身需求,句法分析是语言理解的重要一环,另一方面也为其它自然语言处理任务提供支持。语义分析通常以句法分析的输出结果作为输入以便获得更多的指示信息。根据句法结构的表示形式不同,最常见的句法分析任务可以分为以下三种:1.句法结构分析(syntactic structure parsing),又称短语结构分析(phrase s_syntactic parsing
文章浏览阅读1.3k次,点赞8次,收藏9次。可以尝试重新安装该软件包,以便它能够找到正确的依赖库。如果在安装某个软件包时出现了缺失。希望这些方法能够帮助你解决问题。当你在Linux系统中遇到缺少。_libssl.so.10
文章浏览阅读2.3k次,点赞3次,收藏22次。本文主要简单整理下 Apollo 各模块接口及算法。_apollo hmi_engine模块
文章浏览阅读1.9k次,点赞6次,收藏33次。当今社会,自动驾驶技术已成为汽车产业的未来趋势。但是,要想让自动驾驶车辆真正上路行驶,离不开大规模的高质量数据集的支撑。本文将为您介绍43个经典、热门的自动驾驶数据集,希望对您在选择适合的数据集时有所帮助。_自动驾驶数据集
文章浏览阅读1.6w次,点赞12次,收藏25次。作用域public,private,protected,以及不写时的区别这四个作用域的可见范围如下表所示。说明:如果在修饰的元素上面没有写任何访问修饰符,则表示friendly。不使用关键字默认为包内使用。作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protect_没有用private,public,protected定义
文章浏览阅读427次。选题背景:随着城市化进程的加快和汽车保有量的不断增加,停车位资源日益紧张成为城市交通管理的一大难题。传统的停车方式存在着停车位浪费、停车难、停车费用高等问题。为了解决这些问题,设计一个基于微信小程序的车位共享系统具有重要意义。意义:基于微信小程序的车位共享系统的设计与实现对于城市交通管理和停车资源利用具有重要的意义和价值。首先,该系统可以提高停车位资源的利用率。传统的停车方式往往存在着停车位浪费的问题,因为许多停车位在白天或夜晚时段处于闲置状态。而基于该系统的设计可以通过共享模式,将闲置的停车位租借_共享程序设计
文章浏览阅读2.3k次,点赞3次,收藏15次。注意:Eclipse开发先安装esp-idf-tools-setup2.9版本,此工具安装后自带了Eclipse开发环境具体安装方法查看ESP32 开发笔记 ESP32开发环境搭建 Windows10 esp-idf-tools-setup安装按上方文章安装完成后,电脑桌面会有一个ESP-IDF Eclipse图标,版本为2021-3,还是挺新的双击打开,第一次运行先设置工作目录,在硬盘上创建一个ESP32工程的目录,不要有中文、空格,最好不要在C盘,因为编译会产生大量文件,占用硬盘空间.._eclipse 开发esp32
文章浏览阅读13次。Springboot社区疫情防控信息管理系统的设计与实现xk7p2。Springboot疫情防疫信息化管理系统的设计与实现z18b5。Springboot羽毛球俱乐部管理系统的设计与实现48r85。Springboot基于Vuejs的中国名茶销售平台5ruj8。Springboot疫情物资管理系统的设计与实现j616w。Springboot小区物业管理平台的设计与实现d7rk3。Springboot房屋租赁管理系统的设计与实现64tm5。Springboot基于的文成考研培训管理系统4qe36。
文章浏览阅读4.2k次,点赞10次,收藏58次。本文讲解步进电机驱动原理,以及如何通过CubeMX实现快速配置PWM来输出固定数目个脉冲_stm32输出固定数量脉冲
文章浏览阅读1.3k次。随着 Web 应用越来越广泛,Web 安全威胁日益凸显。黑客利用网站操作系统的漏洞和 **Web**服务程序的 SQL 注入漏洞等得到 Web 服务器的控制权限,轻则篡改网页内容,重则窃取重要内部数据,更为严重的则是在网页中植入恶意代码,使得网站访问者受到侵害。这也使得越来越多的用户关注应用层的安全问题,对 Web 应用安全的关注度也逐渐升温。_目前市面使用最多的web安全漏洞扫描软件
文章浏览阅读1.6w次,点赞11次,收藏5次。Splashtop Wired XdisplayPC端闪退,但勾选镜射模式正常工作的解决方法前言:利用SplashtopWiredXdisplay软件+数据线,可以让iPad成为扩展屏,具体操作可以参考该博客:https://nicktcl.blog.csdn.net/article/details/86433152问题描述:iPad通过数据线与电脑连接,PC的软件已启动,打开iPad的Xdisplay软件,显示正在连接电脑,PC的软件先后出现两次提示音后闪退。但是如果勾选启用镜射模式,则不会闪退,_xdisplay使用虚拟显示器闪退