iview 动态校验表单- 多个输入框分别校验

<template>
    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
        <FormItem
                v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'Item ' + item.index"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
            <Row>
                <Col span="18">
                    <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
                </Col>
                <Col span="4" offset="1">
                    <Button @click="handleRemove(index)">Delete</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Row>
                <Col span="12">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
            <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>

iview自带用循环来动态校验输入框，但循环多个input会同时加上校验规则。

可以改为这样

<template>
    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
        <FormItem
                v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'Item ' + item.index">
            <Row>
                <Col span="18">
                  <FormItem
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: 'Item1 不能为空', trigger: 'blur'}">
                    <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
                  </FormItem>
                </Col>
                <Col span="18" style="margin-top:20px">
                    <FormItem
                    :prop="'items.' + index + '.value1'"
                    :rules="{required: true, message: 'Item2 也不能为空', trigger: 'blur'}">
                    <Input type="text" v-model="item.value1" placeholder="Enter something..."></Input>
                  </FormItem>
                </Col>
                <Col span="18" style="margin-top:20px">
                    <Input type="text" v-model="item.value2" placeholder="Enter something..."></Input>
                </Col>
                <Col span="4" offset="1">
                    <Button @click="handleRemove(index)">Delete</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Row>
                <Col span="12">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
            <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>

将 :prop="  "
     :rules="  "

提取出来，单独添加到不同的输入框

 

以到达分别动态校验效果