iview form表单校验出错
时间:2020-05-22
本文章向大家介绍iview form表单校验出错,主要包括iview form表单校验出错使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先看出错的代码:
<template> <Modal width="25%" v-model="modal_visibleState" :mask-closable="false" > <p slot="header"> <Icon type="information-circled"></Icon> <span>选择学期</span> </p> <Form v-model="semesterForm" ref="semesterForm" :rules="ruleValidate" :label-width="100" label-position="right"> <Row :gutter="16"> <Col span="16"> <FormItem label="开课学期" prop="semesterCode"> <Select v-model="semesterForm.semesterCode" > <Option v-for="item in semesterList" :value="item.code" :key="item.code" >{{ item.name }}</Option> </Select> </FormItem> </Col> </Row> </Form> <div slot="footer"> <Button @click="cancel">取消</Button> <Button @click="ok" type="primary">确定</Button> </div> </Modal> </template> <script> import {getCanArrangeCourseSemesterListApi} from "@/api/graduate-training/course-arrange-paike.js"; export default { data() { return { modal_visibleState:false, semesterList: [],//学期下拉 semesterForm:{ semesterCode:'' }, ruleValidate: { semesterCode: [ { required: true, message: '学期不可为空', type:'string',trigger: 'change' } ] } } }, methods: { initData(){ }, getSemesterList() { getCanArrangeCourseSemesterListApi(this.arrangeCourseCate).then(res => { if (res.success) { this.semesterList = res.data; } }); }, close() { this.$emit("refresh-parent-data"); this.modal_visibleState=false; }, cancel(){ this.modal_visibleState=false; }, ok(){ this.$refs.semesterForm.validate((valid) => { if (valid) { //..... } }) } }, watch: { modal_visibleState(val) { if (val) { this.initData(); this.getSemesterList(); } } } } </script>
问题时,选择了上了学期后,校验老是说学期不可为空:
瞅着自己写的代码和官网的实例对比了108遍,我都没发现问题在哪儿,都开始怀疑自己座位的风水不好了~~~当然是开玩笑。。。
结果今天又开机查看错误,和官网一个字母一个字母的对比,终于发现了问题:
<Form>的model绑定方式是 :model 而不是v-model,改成 :model 之后,问题果然解决了 ~
原文地址:https://www.cnblogs.com/zjfblog/p/12935991.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JWT对SpringCloud进行认证和鉴权
- @SpringBootConfiguration注解
- spring注解之@Import注解的三种使用方式
- 为什么我要写spring.factories文件?
- Tiny85哒哒哒哒
- Tiny85哒哒哒
- Julia机器核心编程.多重分配
- 常用注解使用总结系列: @Order 注解
- Fake伪造数据集
- @EnableDiscoveryClient 注解如何实现服务注册与发现
- idea连接docker实现一键部署
- redis的过期策略和内存淘汰机制
- Redis主从复制原理总结
- redis cluster 的核心原理分析:gossip 通信、jedis smart 定位、主备切换
- SpringBoot自动装配原理解析