时间戳

首页 > 解决方案 > 元素隐藏，但其验证提示仍显示

iview - 元素隐藏，但其验证提示仍显示

问题描述

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

标签： iview

解决方案

我把这两个表格放到单独的模板文件后，问题就解决了。但我仍然不明白为什么这会有效。

// 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>

推荐阅读