前言

上篇文字我们介绍了vue自定义组件并使用v-mode实现双向绑定，当我们做form组件的时候经常要使用表单校验，但在使用ElementUi表单校验时，有时候校验v-model不能即时生效，如下图：

其中子组件为一个输入框，父组件使用ElementUi校验子组件输入的值，我们看到当输入框失焦的时候不能即时校验，要提交可以。

核心解决代码

子组件加上@input="validateField('fatherValue')" ，同时增加 validateField方法，进行手动校验。

 <el-form-item label="子组件输入框：" prop="fatherValue"><childComponent v-model="ruleForm.fatherValue" @input="validateField('fatherValue')"/></el-form-item>.............<script>methods:{//手动再验证validateField(type) {this.$refs.ruleForm.validateField(type);},............}</script>

解决后效果如下：

完整代码

父组件

<template><div id="app"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"><h3>vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法</h3><div>父组件fatherValue：{{ruleForm.fatherValue}}</div><el-form-item label="子组件输入框：" prop="fatherValue"><childComponent v-model="ruleForm.fatherValue" @input="validateField('fatherValue')"/></el-form-item><el-form-item><el-button size="mini" type="primary" @click="submitForm('ruleForm')">提交</el-button></el-form-item></el-form></div>
</template><script>import childComponent from './childComponent.vue'export default {name: 'app',data() {return {ruleForm: {fatherValue: ''},rules: {fatherValue: { required: true, message: '请输入字符', trigger: 'blur' },}}},methods: {//手动再验证validateField(type) {this.$refs.ruleForm.validateField(type);},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('提交成功!');}});},resetForm(formName) {this.$refs[formName].resetFields();},},components: {childComponent},}
</script>

子组件

<template><div><input type="text" v-model="childValue" @blur="returnBackFn"></div>
</template><script>export default {data() {return {childValue: "",}},watch: {//监听value变化（slect控件不是必要，暂时不明）value(newValue, oldValue) {this.childValue = newValue;}},props: {//value是默认双向绑定值，必须在props里面声明value: String},methods: {returnBackFn() {//input是默认双向绑定事件，select控件也可以用input给父组件传递数据this.$emit('input', this.childValue)},},}
</script>

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法相关推荐

vue 数组中嵌套数组_vue+element-ui表单校验之数组多层嵌套
表单校验两层数组嵌套 :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectCode'" :rules=" ...
vue同步请求 + vant表单校验
Vue同步请求 1. Vue同步请求 2. Vant2 表单校验 2.1 全局校验 2.1 自定义函数校验 1. Vue同步请求 async getIsoPersonInfo(id){await is ...
VUE + Element-UI 表单校验input框数据已存在
基础校验方式实现 html代码 <el-form-item label="值名称:" style="width: 80%" prop="valu ...
element-ui 表单校验，el-select校验失效问题
form表单验证时,遇到了校验失效问题,有值的情况下,校验规则并没有对应消失,检查了几个容易出错的地方:1.:model="addForm" 用model绑定表单,而不是v-mod ...
element-UI 表单校验失效处理
1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' " //而不是 :prop=&qu ...
onsubmit校验表单时利用ajax的return false无效解决方法
代码: function checkNewEmail(){var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");var newEm ...
ElementUI表单校验rules封装
工具文件: validator.js //校验规则列表(可扩展) const rules = {URL(url) {const regex = /^(https?|ftp):\/\/([a-zA-Z0 ...
elementui表单校验原始密码_javascript 中入门数据校验
1.onSubmit 放在表单中,返回false为不提交 ,所以放一个函数在里面所有的数据获取,数据判断:都在内:(把一个value放到一个值,和另一个value值比对): 2.获取提交的数据 , ...
element-ui表单校验
<el-form :model="form" ref="form" :rules="rules" ><el-form-it ...
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法

前言

核心解决代码

完整代码

父组件

子组件

vue自定义组件，ElementUi表单校验v-model不能即时生效的解决方法相关推荐

最新文章

热门文章