循環動態生成的ref表單驗證

<div v-for="(item,index) in formData" :key="index">
    <div class="activeForm">{{item['title']}}</div>
    <Form :ref="'roleForms' + index" :model="roleForm[index]" :rules="roleFormRules[index]" :label-width="120" class="form">
        <FormItem label="任務指派" class="pl12">
            <Button>選擇</Button>
        </FormItem>
        <FormItem label="請選擇起止時間" class="pl12" prop="time">
            <DatePicker v-model="roleForm[index].time" placeholder="請選擇起止時間" class="w200" type="daterange"></DatePicker>
        </FormItem>
    </Form>
</div>

// data

roleFormRules: [{
    time: [{type: 'array',
        required: true,
        fields: {
            0: {type: 'date', required: true, message: '請選擇起止日期'},
            1: {type: 'date', required: true, message: '請選擇起止日期'}
        }
    }],
},
{
    time: [{type: 'array',
        required: true,
        fields: {
            0: {type: 'date', required: true, message: '請選擇起止日期'},
            1: {type: 'date', required: true, message: '請選擇起止日期'}
        }
    }],
}
],
roleForm: [{},{}],

//methods

this.roleForm.forEach((item,index) => {
    this.$refs['roleForms' +index][0].validate(valid => { // 動態refs後面需加上[0]
        window.console.log(5);
        if(valid) {
            window.console.log(6);
           
        }
    });
});