当前位置: 首页 > news >正文

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时遇到的问题

前提 页面是个列表页&#xff0c;需要实现增删改查&#xff0c;新增和修改使用表单提交 关键代码如下 // html部分&#xff0c;新增、修改的表单 <el-dialogv-model"dialogVisible2":title"addTitle"width"600"class"update-shujuji-d…...

算法训练 | 二叉树Part7 | 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数

目录 530.二叉搜索树的最小绝对差 数组法 双指针法 ⭐ 迭代法 501.二叉搜索树中的众数 双指针法 迭代法 530.二叉搜索树的最小绝对差 题目链接&#xff1a;530. 二叉搜索树的最小绝对差 - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 数组…...

C++面向对象程序设计 - 标准输出流

在C中&#xff0c;标准输出流通常指的是与标准输出设备&#xff08;通常是终端或控制台&#xff09;相关联的流对象。这个流对象在C标准库中被定义为std::cout、std::err、std::clog&#xff0c;它们是std::ostream类的一个实例。 一、cout&#xff0c;cerr和clog流 ostream类…...

警惕Mallox勒索病毒的最新变种hmallox,您需要知道的预防和恢复方法。

引言 &#xff1a; 在数字化时代&#xff0c;数据已成为企业和个人最宝贵的资产之一。然而&#xff0c;随着技术的不断发展&#xff0c;网络威胁也日益猖獗&#xff0c;其中.hmallox勒索病毒以其独特的加密手段和狡猾的传播方式&#xff0c;成为了网络安全领域的一颗“隐形炸弹…...

2024年华为OD机试真题-火星文计算-C++-OD统一考试(C卷D卷)

题目描述: 已知火星人使用的运算符为#、$,其与地球人的等价公式如下: x#y = 4*x+3*y+2 x$y = 2*x+y+3 1、其中x、y是无符号整数 2、地球人公式按C语言规则计算 3、火星人公式中,#的优先级高于$,相同的运算符,按从左到右的顺序计算 现有一段火星人的字符串报文,请…...

3.00001 postgres如何初始化系统参数?

文章目录 加载参数整体流程参数结构举例&#xff1a;ConfigureNamesBool 初始化参数 InitializeGUCOptionsbuild_guc_variablesInitializeOneGUCOptionInitializeGUCOptionsFromEnvironment 命令行添加SelectConfigFiles配置 加载参数整体流程 我们先看下guc参数是如何管理的。…...

C# 读取 CSV 文件的方法汇总

文章目录 1. 使用System.IO命名空间中的类2. 处理标题行和指定列3. 使用CsvHelper库4. 高级功能和异常处理5. 使用 LINQ6. 总结 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff09;文件是一种简单的文本文件格式&#xff0c;用于存储表格数据。在C#中&a…...

element+ 引入图标报错 Failed to resolve import “@element-plus/icons-vue“ from “

element 引入图标报错 Internal server error: Failed to resolve import “element-plus/icons-vue” from “src\components\TimeLine.vue”. Does the file exist? 原因&#xff1a;element-plus需要单独引入 icons 文档 pnpm install element-plus/icons-vue之后就可以…...

Github 2024-05-25 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-25统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目3TypeScript项目3非开发语言项目1HTML项目1Rust项目1Go项目1Jupyter Notebook项目1Java项目1Angular文档:交付Web应用程序的自信之选…...

VPN的详细理解

VPN&#xff08;Virtual Private Network&#xff0c;虚拟私人网络&#xff09;是一种在公共网络上建立加密通道的技术&#xff0c;通过这种技术可以使远程用户访问公司内部网络资源时&#xff0c;实现安全的连接和数据传输。以下是对VPN的详细介绍&#xff1a; 选择代理浏览器…...

java后端轮播图的设计

对于表示轮播图位置这种有限且较小范围的数据&#xff0c;一般可以使用整数类型来表示。考虑到位置序号一般是非负整数且数量较少&#xff0c;可以选择使用小范围的整数类型&#xff0c;如下&#xff1a; 整数类型: 对于Java中&#xff0c;可以考虑使用 int 类型来表示位置序号…...

upload-labs 21关解析

目录 一、代码审计 二、实践 三、总结 一、代码审计 $is_upload false; $msg null; if(!empty($_FILES[upload_file])){//检查MIME$allow_type array(image/jpeg,image/png,image/gif);if(!in_array($_FILES[upload_file][type],$allow_type)){$msg "禁止上传该类型…...

常用汇编指令

&#xff08;arg&#xff09;argument&#xff1a;自变量&#xff0c;变元 &#xff08;reg&#xff09;register&#xff1a;寄存器 &#xff08;seg&#xff09;segment&#xff1a;段寄存器 &#xff08;mem&#xff09;memory&#xff1a;存储器&#xff08;内存单元&am…...

LabVIEW软件需求分析文档内容和编写指南

编写LabVIEW软件需求分析文档&#xff08;Software Requirements Specification, SRS&#xff09;是软件开发的关键步骤之一。以下是详细的内容结构、编写指南和注意事项&#xff1a; 内容结构 引言 项目背景&#xff1a;简要介绍项目背景和目的。 文档目的&#xff1a;说明需…...

spring cache(三)demo

目录 一、入门demo 1、pom 2、配置文件 3、config 4、controller 5、service 6、dao 7、dto与常量 8、测试&#xff1a; 8.1、无参 8.2、单参 &#xff08;1&#xff09;缓存与删除缓存 &#xff08;2&#xff09;删除缓存加入异常 二、自定义删除key 1、pom 2、…...

Android 应用开发语言选择对比

Android开发语言有多种&#xff0c;但是每种语言的各有不同的适用场景&#xff0c;对比介绍如下&#xff1a; 一.首选&#xff1a;原生应用Java&#xff0c;Kotlin 1.截至目前&#xff0c;大约有70%的Android开发者仍然使用Java语言进行开发&#xff0c;而30%的开发者则选择…...

Git 小白入门到进阶—(基本概念和常用命令)

一.了解 Git 基本概念和常用命令的作用 (理论) 基本概念 1、工作区 包含.git文件夹的目录&#xff0c;主要用存放开发的代码2、仓库 分为本地仓库和远程仓库&#xff0c;本地仓库是自己电脑上的git仓库(.git文件夹);远程仓库是在远程服务器上的git仓库git文件夹无需我们进行操…...

大数据框架总结(全)

☔️ 大数据框架总结&#xff08;全&#xff09; 关注“大数据领航员”&#xff0c;在公众号号中回复关键字【大数据面试资料】&#xff0c;即可可获取2024最新大数据面试资料的pdf文件 一. Hadoop HDFS读流程和写流程 HDFS写数据流程 &#xff08;1&#xff09;客户端通过…...

44、Flink 的 Interval Join 详解

Interval Join Interval join 组合元素的条件为&#xff1a;两个流&#xff08;暂时称为 A 和 B&#xff09;中 key 相同且 B 中元素的 timestamp 处于 A 中元素 timestamp 的一定范围内&#xff0c;即 b.timestamp ∈ [a.timestamp lowerBound; a.timestamp upperBound] 或…...

H6246 60V降压3.3V稳压芯片 60V降压5V稳压芯片IC 60V降压12V稳压芯片

H6246降压稳压芯片是一款电源管理芯片&#xff0c;为高压输入、低压输出的应用设计。以下是对该产品的详细分析&#xff1a; 一、产品优势 宽电压输入范围&#xff1a;H6246支持8V至48V的宽电压输入范围&#xff0c;使其能够适应多种不同的电源环境&#xff0c;增强了产品的通用…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...