iview循环Form表单验证

太羽
<template>
  <div>
    <div v-for="(item,index) in list">
            <Form :ref="item.id" :model="item" :label-width="80" style="width: 300px">
                <FormItem :label="item.id" prop="value" :rules="{required: true, message: 'item'+item.id+'不能为空', 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>
                    <Button type="primary" @click="handleSubmit(item.id)">Submit</Button>
                </FormItem>
            </Form>
        </div>
    <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
</div>
</template>
<script>
    export default {
        data() {
            return {
                list: [
                  {
                    id:'1',
                    value: '',
                    index: 1,
                    status: 1
                  },
                  {
                    id:'2',
                    value: '',
                    index: 1,
                    status: 1
                  }
                ],
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name][0].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name][0].resetFields();
            },
            handleAdd() {
                this.list.push(
                    {
                        id:'3',
                        value: '',
                        index: 1,
                        status: 1
                    }
                );
            },
            handleRemove(index) {
                this.list.splice(index,1);
            }
        }
    }
</script>
阅读 195

太羽
学习笔记

但行好事,莫问前程!

336 声望
6 粉丝
0 条评论
你知道吗?

但行好事,莫问前程!

336 声望
6 粉丝
宣传栏