场景描述

       在实际业务场景中，我们可能需要动态循环生成多个form表单（并且有表单校验），而每个form表单中又可能需要动态控制某一项item的显示隐藏，在我的实际工作中，控制表单的显示隐藏时，多使用的v-if，而此时表单校验会呈现出校验失效、未触发的情况。

            <div v-for="(item,index) in imgAndContent.formList" :key="item.key" class="content-element-item">
                <el-form :rules="rules" :ref="'form'+ item.key" :model="item.form" label-width="180px">
                    <el-form-item label="类型">
                        <el-select v-model="item.form.contentType" @change="handleChangeType(item.form,index)" placeholder="请选择类型">
                            <el-option label="文字" :value="'0'"></el-option>
                            <el-option label="图片" :value="'1'"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 1、文字类型 -->
                    <el-form-item :key="item.key+'content'" v-if="item.form.contentType==='0'" label="内容" prop="content">
                        <el-input v-model="item.form.content" @change="setContentLocation(item.form,index,item.key)" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <!-- 2、图片类型 -->
                    <el-form-item :key="item.key+'contentImgUrl'" v-if="item.form.contentType==='1'" label="图片地址" prop="contentImgUrl">
                        <el-input v-model="item.form.contentImgUrl" @change="setContentLocation(item.form,index,item.key)" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="delContentConfig(index)">删除</el-button>
                    </el-form-item>
                </el-form>
            </div>

原因

        众所周知，vue响应式的实现中，除了Object.defineProperty外，还有一个非常重要的东西存在——diff算法，diff算法在工作的过程中会通过key进行快速的对比，查找出不同的节点，判断其是否需要被重新渲染。一旦vue认为dom节点没有变化它就不会重新进行渲染，而是复用了节点。而上面场景中，虽然我们循环的form添加了key，但是内部动态变化的form-item被认为是同一个了（因为每个form中都有这个变化的form-item），所以在控制显示隐藏时，vue将其他form中的item复用到了正在操作的表单上，因此会出现表单校验失效的情况

解决

        给每一个动态显示隐藏的元素添加唯一的key，可以是for循环的key+name