場景描述

? ? ? ?在實際業務場景中，我們可能需要動態循環生成多個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

?