如何解决元素已隐藏,但其验证提示仍然显示
我正在使用VUE 2.5.1和iView 4.0.0。我的项目页面中有2种形式,我使用v-if属性进行切换。问题是我重新分配了form_data的值(新的不具有属性“ usage”)并将this.met_type设置为3后,“ Item”输入显示,但是一行红色文本“ usage is required”也显示在它下面。 “用法”输入已被隐藏,为什么其验证提示仍然显示?有办法避免此错误消息吗?
<template>
<div v-if="met_type==2">
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Usage" prop="usage" required>
<Input :value="form_data.usage" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</div>
<div v-if="met_type==3">
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Item" prop="item" required>
<Input :value="form_data.item" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</div>
<!-- other code omitted -->
</template>
<script>
export default {
methods: {
loadData: function(met_type) {
dataUtils.fetch(this.met_id,met_type,(retVal) => {
// Fetch data
// whe met_type == 3,form_data does not have property 'usage'
this.form_data = retVal.data;
this.met_type = met_type;
});
}
}
}
</script>
解决方法
将这两种形式放入单独的模板文件后,问题得以解决。但是我仍然不明白为什么这样有效。
// ComponentA.vue
<template>
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Usage" prop="usage" required>
<Input :value="form_data.usage" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</template>
// ComponentB.vue
<template>
<Form :rules="ruleCustom" :model="form_data">
<Row>
<Col span="12">
<FormItem label="Item" prop="item" required>
<Input :value="form_data.item" readonly />
</FormItem>
</Col>
</Row>
<!-- other code omitted -->
</Form>
</template>
// The main component file
<template>
<div v-if="met_type==2">
<ComponentA>
</ComponentA>
</div>
<div v-if="met_type==3">
<ComponentB>
</ComponentB>
</div>
<!-- other code omitted -->
</template>
<script>
export default {
methods: {
loadData: function(met_type) {
dataUtils.fetch(this.met_id,met_type,(retVal) => {
// Fetch data
// whe met_type == 3,form_data does not have property 'usage'
this.form_data = retVal.data;
this.met_type = met_type;
});
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。