場景描述

? ? ? ?在實際業(yè)務(wù)場景中，我們可能需要動態(tài)循環(huán)生成多個form表單（并且有表單校驗），而每個form表單中又可能需要動態(tài)控制某一項item的顯示隱藏，在我的實際工作中，控制表單的顯示隱藏時，多使用的v-if，而此時表單校驗會呈現(xiàn)出校驗失效、未觸發(fā)的情況。

            <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="內(nèi)容" prop="content">
                        <el-input v-model="item.form.content" @change="setContentLocation(item.form,index,item.key)" placeholder="請輸入內(nèi)容"></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="請輸入內(nèi)容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="delContentConfig(index)">刪除</el-button>
                    </el-form-item>
                </el-form>
            </div>

原因

? ? ? ? 眾所周知，vue響應(yīng)式的實現(xiàn)中，除了Object.defineProperty外，還有一個非常重要的東西存在——diff算法，diff算法在工作的過程中會通過key進行快速的對比，查找出不同的節(jié)點，判斷其是否需要被重新渲染。一旦vue認為dom節(jié)點沒有變化它就不會重新進行渲染，而是復(fù)用了節(jié)點。而上面場景中，雖然我們循環(huán)的form添加了key，但是內(nèi)部動態(tài)變化的form-item被認為是同一個了（因為每個form中都有這個變化的form-item），所以在控制顯示隱藏時，vue將其他form中的item復(fù)用到了正在操作的表單上，因此會出現(xiàn)表單校驗失效的情況

解決

? ? ? ? 給每一個動態(tài)顯示隱藏的元素添加唯一的key，可以是for循環(huán)的key+name

?