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>