iView框架Form表单验证失效（验证状态无法及时更新）

背景：近期在使用vue+iView框架开发前台的时候，遇到了Form表单验证失效的问题，特地记录下来，以供参考（为了更直观地看到变化，代码做了精简）：
问题描述：使用iView框架原生的Form表单非空校验时，空值可以触发表单非空提示，但是输入正常值后，非空提示未能消失（如图）：

但是随便修改一些代码，触发热更新后，输入框的校验功能又能正常使用了（如图）：

分析：起初我认为是热更新的问题，随后针对iView官方文档琢磨了许久，才发现是表单model取值的问题，虽然Form表单和内置Input输入框的model关系已经按照要求进行了递进，但是model所取的comp是通过上级组件props传下来的，也就是不在自身定义的data中（如下）：

<Form :model="comp.data[0]" :rules="ruleValidate" ref="nameForm">
    <FormItem prop="name" label="Name" :label-width="150">
        <Input v-model="comp.data[0].name" placeholder="请输入姓名" />
    </FormItem>
</Form>
<script>
    export default {
	props: ["comp"],
	data() {
	    return {	
		ruleValidate: {
		    name: [{
		        required: true,
		        message: "请输入姓名",
		        trigger: 'blur'
		    }]
	        }
            };
        }
    }
</script>

如果Form的model使用data中定义的字段，则可以正常使用Form表单的验证功能（如下）：

<template>
    <Form :model="formValidate" :rules="ruleValidate" ref="nameForm">
        <FormItem prop="name" label="Name" :label-width="150">
            <Input v-model="formValidate.name" placeholder="请输入姓名" />
        </FormItem>
    </Form>
</template>
<script>
    export default {
	props: ["comp"],
	data() {
	    return {	
		ruleValidate: {
		    name: [{
		        required: true,
		        message: "请输入姓名",
		        trigger: 'blur'
		    }]
	        }
            };
        }
    }
</script>

总结：使用iView框架的原生表单校验功能，Form的model取值需要是本页面data中自定义的，不能取自上级组件的props
文末附上全部代码：
错误代码示例：

<template>
    <Form :model="comp.data[0]" :rules="ruleValidate" ref="nameForm">
        <FormItem prop="name" label="Name" :label-width="150">
            <Input v-model="comp.data[0].name" placeholder="请输入姓名" />
        </FormItem>
    </Form>
</template>
<script>
    export default {
	props: ["comp"],
	data() {
	    return {	
		ruleValidate: {
		    name: [{
		        required: true,
		        message: "请输入姓名",
		        trigger: 'blur'
		    }]
	        }
            };
        }
    }
</script>
<style>
</style>

正确代码示例:

<template>
    <Form :model="formValidate" :rules="ruleValidate" ref="nameForm">
        <FormItem prop="name" label="Name" :label-width="150">
            <Input v-model="formValidate.name" placeholder="请输入姓名" />
        </FormItem>
    </Form>
</template>
<script>
    export default {
	props: ["comp"],
	data() {
	    return {	
		ruleValidate: {
		    name: [{
		        required: true,
		        message: "请输入姓名",
		        trigger: 'blur'
		    }]
	        }
            };
        }
    }
</script>
<style>
</style>

标签：Form,验证,comp,表单,props,data,iView
来源： https://www.cnblogs.com/huangch/p/15593548.html