vue-点击生成动态值,动态渲染回显输入框

1.前言

动态点击生成数值,回显输入框,并绑定。 

2.实现

<template><div style="display:flex;align-items: center;flex-direction:row"><a-input:key="inputKey"v-model="uploadData[peo.field]"placeholder="回显"disabled/><a-button type="primary" @click="workNumProduce">点击生成</a-button></div>
</template><script>
export default {data() {return {uploadData: {// 假设peo.field是'workNum'workNum: ''},peo: {field: 'workNum'},inputKey: Date.now() // 初始key值};},methods: {workNumProduce() {// 生成工号逻辑,这里只是一个示例const workNum = 'G' + Math.floor(Math.random() * 1000000);this.uploadData[this.peo.field] = workNum;this.inputKey = Date.now(); // 更新key值,强制刷新<a-input>}}
};
</script>

        当key的值发生变化时,Vue会重新渲染该组件。将key绑定到一个动态的值,例如一个时间戳,这样每次点击按钮时,key的值都会更新,从而强制刷新<a-input>组件。

3.强制刷新this.$forceUpdate()

vue-强制更新组件this.$forceUpdate()-CSDN博客文章浏览阅读244次。强制更新组件this.$forceUpdate()https://blog.csdn.net/2301_76671906/article/details/145563122?fromshare=blogdetail&sharetype=blogdetail&sharerId=145563122&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/16215.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

deepseek大模型集成到idea

1 下载插件 安装CodeGPT打开 IntelliJ IDEA&#xff0c;鼠标点击左上角导航栏&#xff0c;File --> Setting 2 申请API key 3 配置deepseek 在 Settings 界面中的搜索框中&#xff0c;搜索 CodeGPT&#xff0c;路径 Tools --> CodeGPT --> Providers --> 如下一…

C++引用深度详解

C引用深度详解 前言1. 引用的本质与核心特性1.1 引用概念1.2 核心特性 2. 常引用与权限控制2.1 权限传递规则2.2 常量引用2.3 临时变量保护1. 样例2. 样例3. 测试 三、引用使用场景分析3.1 函数参数传递输出型参数避免多级指针高效传参 3.2 做函数返回值正确使用危险案例 4. 性…

npm运行Vue项目报错 error:0308010c:digital envelope routines::unsupported

大家好&#xff0c;我是 程序员码递夫。 问题 VSCode 运行Vue项目&#xff0c;提示错误&#xff1a; building 2/2 modules 0 activeError: error:0308010c:digital envelope routines::unsupported 解决方法 原因是 npm 高版本(大于17)&#xff0c;对ssl的处理做了改进&…

蓝桥杯---N字形变换(leetcode第6题)题解

文章目录 1.问题重述2.例子分析3.思路讲解4.代码分析 1.问题重述 这个题目可以是Z字形变换&#xff0c;也可以叫做N字形变换&#xff1a; 给定我们一串字符&#xff0c;我们需要把这串字符按照先往下写&#xff0c;再往右上方去写&#xff0c;再往下去写&#xff0c;再往右上…

第六篇:数字逻辑的“矩阵革命”——域控制器中的组合电路设计

副标题 &#xff1a;用卡诺图破解车身域控制器的逻辑迷宫&#xff0c;揭秘华为DriveONE的“数字特工” ▍ 开篇&#xff1a;黑客帝国世界观映射 > "Welcome to the Real World." —— Morpheus > 在数字逻辑的世界里&#xff0c;组合电路就是构建Matr…

Linux(Ubuntu)安装pyenv和pyenv-virtualenv

Ubuntu安装pyenv和pyenv-virtualenv 安装 pyenv1. 下载 pyenv2. 配置环境变量3. 重启 Shell4. 安装依赖5.检测是否安装成功 安装 pyenv-virtualenv1. 安装 pyenv-virtualenv2. 配置环境变量3. 重启 Shell pyenv 的使用1. 查看可安装的 Python 版本2. 安装指定版本的 Python3. 查…

LVS集群

特性NAT 模式DR 模式工作原理Director 修改请求/响应的 IP 地址和端口&#xff0c;流量双向经过 DirectorDirector 仅修改请求的 MAC 地址&#xff0c;响应由 Real Server 直接返回客户端性能较低&#xff08;需处理双向流量&#xff0c;易成瓶颈&#xff09;高&#xff08;仅处…

远程桌面连接提示被锁 更改帐户锁定策略

解锁&#xff1a; 从 hyper-v管理器进入 vm cmd 进入 gpedit.msc 计算机配置 -> Windows 设置 -> 安全设置 -> 帐户策略 -> 帐户锁定策略 可以把 允许管理员帐户锁定 禁用&#xff0c;也可以把 帐户锁定阈值 调大一点&#xff08;如果还会锁定 时间查看器 ->…

docker.service job docker.service/start failed with result ‘dependency‘

Bug:docker.service job docker.service/start failed with result ‘dependency’ 运行以下命令&#xff1a; sudo systemctl start docker.service出现错误&#xff1a; docker.service job docker.service/start failed with result dependency解决办法&#xff1a; 给系…

前端实现在PDF上添加标注(1)

前段时间接到一个需求&#xff0c;用户希望网页上预览PDF&#xff0c;同时能在PDF上添加文字&#xff0c;划线&#xff0c;箭头和用矩形框选的标注&#xff0c;另外还需要对已有的标注进行修改&#xff0c;删除。 期初在互联网上一通搜索&#xff0c;对这个需求来讲发现了两个问…

《optee系统架构从入门到精通》

CSDN学院课程连接&#xff1a;https://edu.csdn.net/course/detail/39573 讲师介绍 拥有 12 年手机安全、汽车安全、芯片安全开发经验&#xff0c;擅长 Trustzone/TEE/ 安全的设计与开发&#xff0c;对 ARM 架构的安全领域有着深入的研究和丰富的实践经验&#xff0c;能够将…

jupyter notebook中3种读图片的方法_与_图片翻转(上下翻转,左右翻转,上下左右翻转)

已有图片cat.jpg 相对于代码的位置&#xff0c;可以用./cat.jpg进行读取。 下面是3种读图片的方法。 1.python读图片-pillow 图片文件不适合用open去读取 用open读图片&#xff0c;易引发UnicodeDecodeError: gbk codec cant decode byte 0xff in position 0: illegal multib…

文理医院预约挂号系统的设计与实现(代码+数据库+LW)

摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定文理医院预约挂号系统的总体功能模块。然后&#…

从MySQL优化到脑力健康:技术人与效率的双重提升

文章目录 零&#xff1a;前言一&#xff1a;MySQL性能优化的核心知识点1. 索引优化的最佳实践实战案例&#xff1a; 2. 高并发事务的处理机制实战案例&#xff1a; 3. 查询性能调优实战案例&#xff1a; 4. 缓存与连接池的优化实战案例&#xff1a; 二&#xff1a;技术工作者的…

本地部署DeepSeek R1 + 界面可视化open-webui

本地部署DeepSeek R1 界面可视化open-webui ollama是物理机本地安装 open-webui是容器启动 另外&#xff0c;用docker 部署ollama也很方便ollama docker 安裝部署ollama ollama官网 安装 Linux上安装: curl -fsSL https://ollama.com/install.sh | sh使用命令行管理 拉…

Oracle常用导元数据方法

1 说明 前两天领导发邮件要求导出O库一批表和索引的ddl语句做国产化测试&#xff0c;涉及6个系统&#xff0c;6千多张表&#xff0c;还好涉及的用户并不多&#xff0c;要不然很麻烦。 如此大费周折原因&#xff0c;是某国产库无法做元数据迁移。。。额&#xff0c;只能我手动导…

win32汇编环境,对线程的创建与操作示例二

;运行效果 ;win32汇编环境,对线程的创建与操作示例二 ;本文主要是实现用CreateThread创建线程时,如何把参数传入进去 ;以下举3个例子说明,如何把数值、字符串和自定义结构传入线程之中 ;下面为asm文件 ;>>>>>>>>>>>>>>>>>…

【Obsidian】当笔记接入AI,Copilot插件推荐

当笔记接入AI&#xff0c;Copilot插件推荐 自己的知识库笔记如果增加AI功能会怎样&#xff1f;AI的回答完全基于你自己的知识库余料&#xff0c;是不是很有趣。在插件库中有Copilot插件这款插件&#xff0c;可以实现这个梦想。 一、什么是Copilot&#xff1f; 我们知道githu…

【DeepSeek】deepseek可视化部署

目录 1 -> 前文 2 -> 部署可视化界面 1 -> 前文 【DeepSeek】DeepSeek概述 | 本地部署deepseek 通过前文可以将deepseek部署到本地使用&#xff0c;可是每次都需要winR输入cmd调出命令行进入到命令模式&#xff0c;输入命令ollama run deepseek-r1:latest。体验很…

html为<td>添加标注文本

样式说明&#xff1a; /*为td添加相对定位点*/ .td_text {position: relative; }/*为p添加绝对坐标(相对于父元素中的定位点)*/ .td_text p {position: absolute;top: 80%;font-size: 8px; }参考资料&#xff1a;