元素已隐藏，但其验证提示仍然显示

问题描述

我正在使用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>