vue3项目中新增修改时使用nextTick时遇到的问题

本文主要是介绍vue3项目中新增修改时使用nextTick时遇到的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前提
页面是个列表页，需要实现增删改查，新增和修改使用表单提交

关键代码如下

// html部分，新增、修改的表单
<el-dialogv-model="dialogVisible2":title="addTitle"width="600"class="update-shujuji-dialog"><el-form :model="addForm" :rules="rules" label-width="auto" style="max-width: 600px" ref="formRef"><el-form-item label="字典类型" prop="dictType"><el-select v-model="addForm.dictType" :disabled="true"><el-option :label="item.dictType":value="item.dictType" v-for="item in selectList" :key="item.dictType"></el-option></el-select></el-form-item><el-form-item label="数据标签" prop="dictLabel"><el-input v-model="addForm.dictLabel" placeholder="数据标签"/></el-form-item><el-form-item label="数据键值" prop="dictValue"><el-input v-model="addForm.dictValue" placeholder="数据键值"/></el-form-item><el-form-item label="样式属性" prop="cssClass"><el-input v-model="addForm.cssClass" placeholder="样式属性"/></el-form-item><el-form-item label="显示排序"><el-input-number v-model="addForm.dictSort" controls-position="right" :min="0" :max="1000"></el-input-number></el-form-item><el-form-item label="回显样式"><el-select v-model="addForm.listClass"><el-option :label="item.label":value="item.value" v-for="item in huixianStyle" :key="item.value"></el-option></el-select></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="addForm.remark"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible2 = false">取消</el-button><el-button type="primary" @click="addDictionaryDataFn">确定</el-button></div></template></el-dialog>// js部分import {onMounted, reactive, toRefs, ref, getCurrentInstance, watch, nextTick } from "vue";export default {name: "autoLabel",components: {},setup(props) {const formRef = ref(null);const state = reactive({dialogVisible2: false,addForm: {},addTitle: '新增字典类型',rules: {dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }]}})// 修改const update = (row) => {state.addTitle = '修改字典类型';state.dialogVisible2 = true;nextTick(() => {proxy.$refs.formRef.resetFields();})let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改时回显数据}}}

遇到的问题
乍一看以上代码，逻辑上没问题，但是修改数据后，刷新列表，发现，列表数据确实是修改后的了，此时再次点击修改，会发现修改弹框中的数据并没有更新，还是以前的旧数据，很费解。最后才发现问题所在，修改时给表单赋值回显时需要写在nextTick里，如下

// 修改const update = (row) => {state.addTitle = '修改字典类型';state.dialogVisible2 = true;nextTick(() => {let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改时回显数据proxy.$refs.formRef.resetFields();})}}

这篇关于vue3项目中新增修改时使用nextTick时遇到的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---