vuejs的v-for遇到過的數據渲染錯誤的bug，緣由是和key值有關

 

 <div v-for="(item,i) in doc" :key="i">
                    <el-row>
                        <el-col :span="2">
                            文案模塊{{i+1}}
                        </el-col>
                        <el-col :span="1" :offset="16">
                            <el-button @click="deletemodel(item,doc,i)" size="small">刪除</el-button>
                        </el-col>
                    </el-row>
    
                    <p class="pline"></p>
                    <el-form-item label="請設置模塊標題：">
                        <el-input placeholder="請輸入3-6個字的標題" class="uploadwidth" maxlength="6" minlength="3" v-model="item.title"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <!-- <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8}" class="inputwidth" v-model="item.content" placeholder="請輸入文案"></el-input> -->
                        <vue-ueditor-wrap v-model="item.content"></vue-ueditor-wrap>
                    </el-form-item>
    
                </div>
    
                <div v-for="(item,i) in pic" :key="i">
                    <el-row>
                        <el-col :span="2">
                            圖片模塊{{i+1}}
                        </el-col>
                        <el-col :span="1" :offset="16">
                            <el-button @click="deletemodel(item,pic,i)" size="small">刪除</el-button>
                        </el-col>
                    </el-row>
    
                    <p class="pline"></p>
                    <el-form-item label="請設置模塊標題">
                        <el-input class="uploadwidth" placeholder="請輸入3-6個字的標題" maxlength="6" minlength="3" v-model='item.title'></el-input>
                    </el-form-item>
                    <el-form-item label="PC端：">
                        <el-upload class="upload-demo uploadwidth" action="/admin/upload" name="file" :limit="1" :on-success="successPicPc" :file-list="fileList">
                            <div style="display:inline-block; margin-left:10px;" slot="tip">
    
                                <el-popover v-if="item.pcTopImgUrl!==null&&item.pcTopImgUrl!==undefined&&item.pcTopImgUrl!==''" placement="right" width="500" trigger="click">
                                    <img :src="item.pcTopImgUrl" alt="" width="100%">
                                    <el-button slot="reference" size="small">查看</el-button>
                                </el-popover>
                            </div>
                            <el-button size="small" type="primary" @click="test(i)">上傳</el-button>
                        </el-upload>
                      
                    </el-form-item>
                    <el-form-item label="H5端：">
                        <el-upload class="upload-demo uploadwidth" action="/admin/upload" name="file" :on-success="successPicH5" :limit="1" :file-list="fileList">
                            <div style="display:inline-block; margin-left:10px;" slot="tip">
    
                                <el-popover v-if="item.h5TopImgUrl!==null&&item.h5TopImgUrl!==undefined&&item.h5TopImgUrl!==''" placement="right" width="500" trigger="click">
                                    <img :src="item.h5TopImgUrl" alt="" width="100%">
                                    <el-button slot="reference" size="small">查看</el-button>
                                </el-popover>
                            </div>
                            <el-button size="small" type="primary" @click="test(i)">上傳</el-button>
                        </el-upload>
                    </el-form-item>
                </div>

View Code

圖片模塊在刪掉的時候她的富文本框沒有被刪除，其餘部分的被刪除了，就這個出現了滯後性，通過排查是v-for的key值出現的bug

上面兩個部分的代碼框架是相似的，vue的數據驅動是精準的數據驅動，詳細的緣由你們去查v-for的key值吧，個人解決方法是

把key值改一下，在原來+10.其實最好key值是惟一的，不要用i，索引