Vue使用Element-plus表单v-for校验规则问题

在Vue3学习的过程中使用Element-plus的from表单。使用v-for循环添加input输入框时遇到了添加的校验规则无法正常生效的问题。
本文将给出解决方案，先看Element-plus中的源码，以下是从源码中截取的部分：

<template>
    <el-form
            ref="dynamicValidateForm"
            :model="dynamicValidateForm"
            label-width="120px"
            class="demo-dynamic"
    >
    //重点关注el-form-item标签中的prop内容
        <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :key="domain.key"
                :label="'Domain' + index"
                :prop="'domains.' + index + '.value'"
                :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur',
      }"
        >
            <el-input v-model="domain.value"></el-input>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
    export default {
        data() {
            return {
                dynamicValidateForm: {
                    domains: [
                        {
                            key: 1,
                            value: '',
                        },
                    ],
                    email: '',
                },
            }
        },
    }
</script>

源码中采用了直接在el-form-item中添加规则的方式，其中的:prop分为了三部分组成：
‘domains.’、index 和 ‘.value’。v-for规则校验的坑就在此处，:prop的三部分分别对应了：v-for的对象、元素的index 和下方input输入框v-model绑定的对象。可见下图

此规则必须严格对应，否则在item中的输入框校验规则就会失效。