点击取消按钮,console出来数据更改了,页面视图没有更新
点击取消按钮,console出来数据更改了,页面视图没有更新
前言
实现效果:点击取消按钮,页面视图全部为空,
遇到的问题: 点击取消按钮,console出来数据更改了,SchemaJson 都是默认值啦,页面视图没有更新

方法:使用 key 属性实现局部强制刷新
<template><div class="app-container"><el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" ><el-form-item label="数据格式"><json-schema :schema.sync="fromModel.SchemaJson" :show-default-value="true":is-mock="false"></json-schema></el-form-item><el-form-item><el-button type="primary" :loading="upload.isUploading">确 定</el-button><el-button @click="cancel">取 消</el-button></el-form-item></el-form></div>
</template><script>import jsonSchema from '../json-schema-editor.vue'export default {name: "algorithmCom",components: { uploadCom, jsonSchema },data() {return {upload: {isUploading: false,},fromModel: {SchemaJson: {"type": "object","properties": {},},},rules: {},};},methods: {cancel() {this.fromModel = {SchemaJson: {"type": "object","properties": {},}};this.upload.isUploading = false;this.$nextTick(() => {this.$refs.FormRef.resetFields();});console.log(this.fromModel)},},computed: {},
};
</script>
通过排查发现
使用 key 属性实现局部强制刷新
原理:
在 Vue 中,给组件或者 DOM 元素添加 key 属性,当 key 值改变时,Vue 会认为这是一个全新的元素,从而重新创建和渲染它以及它内部的子元素,达到强制局部刷新的效果。
应用示例:
首先,在你希望实现局部刷新的表单元素外层添加 key 属性,并在 data 中定义对应的响应式数据来控制这个 key 值,比如针对整个 el-form 表单区域进行局部刷新:
<el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" :key="formKey"> </el-form>
然后在 data 函数里添加 formKey 这个响应式数据:
data() {return {// 用于控制 key 值变化,实现局部刷新formKey: 0};},
最后,在 cancel 方法中改变 formKey 的值来强制表单区域重新渲染,实现局部刷新:
cancel() {this.fromModel = {SchemaJson: {"type": "object","properties": {},}};this.upload.isUploading = false;// 改变 key 值,触发局部重新渲染this.formKey++;this.$nextTick(() => {this.$refs.FormRef.resetFields();});},
Ending…
相关文章:
点击取消按钮,console出来数据更改了,页面视图没有更新
点击取消按钮,console出来数据更改了,页面视图没有更新 前言 实现效果:点击取消按钮,页面视图全部为空, 遇到的问题: 点击取消按钮,console出来数据更改了,SchemaJson 都是默认值啦…...
web框架在什么程度上受限 ?
Web框架提供了开发网站和Web应用的基础结构和工具,但它们也有一些限制。了解这些限制有助于选择合适的框架或决定何时可能需要寻找或开发替代方案。 1、问题背景 提问者计划构建一个 RESTful web 服务,该服务将只使用 JSON/XML 接口,不包含 …...
实践:事件循环
实践:事件循环 代码示例 console.log(1); setTimeout(() > console.log(2), 0); Promise.resolve(3).then(res > console.log(res)); console.log(4);上述的代码的输出结果是什么 1和4肯定优先输出,因为他们会立即方式堆栈的执行上下文中执行&am…...
C++ 设计模式:建造者模式(Builder Pattern)
链接:C 设计模式 链接:C 设计模式 - 工厂方法 链接:C 设计模式 - 抽象工厂 链接:C 设计模式 - 原型模式 建造者模式(Builder Pattern)是一种创建型设计模式,它允许你分步骤创建复杂对象。与其他…...
SQL偏移类窗口函数—— LAG()、LEAD()用法详解
SQL偏移类窗口函数:LAG() 和 LEAD() 用法详解 在 SQL 中,偏移类窗口函数 LAG() 和 LEAD() 用于访问当前行的前几行或后几行的值。 1. LAG() 函数 LAG() 函数返回当前行的前几行的数据。 LAG(Expression, OffSetValue, DefaultVar) OVER (PARTITION BY …...
基于Pytorch和yolov8n手搓安全帽目标检测的全过程
一.背景 还是之前的主题,使用开源软件为公司搭建安全管理平台,从视觉模型识别安全帽开始。主要参考学习了开源项目 https://github.com/jomarkow/Safety-Helmet-Detection,我是从运行、训练、标注倒过来学习的。由于工作原因,抽空…...
[CTF/网络安全] 攻防世界 upload1 解题详析
姿势 在txt中写入一句话木马<?php eval($_POST[qiu]);?> 回显如下: 查看源代码: Array.prototype.contains function (obj) { var i this.length; while (i--) { if (this[i] obj) { return true; } } return false; } function …...
03-其他
我们学校的教授们都还是很温柔,很有趣的,所以只要大家好好发挥,拿到90没问题的。 你以后打算研究什么? 你研究生的打算是什么?你计算机的前沿技术了解多少?(这个问题我真没了解过。。拉了&…...
EasyExcel自定义动态下拉框(附加业务对象转换功能)
全文直接复制粘贴即可,测试无误 一、注解类 1、ExcelSelected.java 设置下拉框 Documented Target({ElementType.FIELD})//用此注解用在属性上。 Retention(RetentionPolicy.RUNTIME)//注解不仅被保存到class文件中,jvm加载class文件之后,…...
2025.1.2
练习: 1> 创建一个工人信息库,包含工号(主键)、姓名、年龄、薪资。 2> 添加三条工人信息(可以完整信息,也可以非完整信息) 3> 修改某一个工人的薪资(确定的一个…...
重庆大学软件工程复试怎么准备?
重大软件复试相对来说不算刁钻,关键是对自己的竞赛和项目足够了解,能应对老师的提问。专业课范围广,英文文献看个人水平,难度不算大,整体只要表现得得体从容,以及充分的准备,老师不会为难你。 …...
Ant Design Pro搭建react项目
1、使用pro-cli 来快速的初始化脚手架,先全局安装 npm i ant-design/pro-cli -g pro create myapp 2、选择模板类型 pro 是基础模板,只提供了框架运行的基本内容,complete 包含所有区块,不太适合当基础模板来进行二次开发。&a…...
mysql连接时报错1130-Host ‘hostname‘ is not allowed to connect to this MySQL server
不在mysql服务器上通过ip连接服务提示1130错误怎么回事呢。这个错误是因为在数据库服务器中的mysql数据库中的user的表中没有权限。 解决方案 查询mysql库的user表指定账户的连接方式 SELECT user, host FROM mysql.user;修改指定账户的host连接方式 update mysql.user se…...
办公 三之 Excel 数据限定录入与格式变换
开始-----条件格式------管理规则 IF($A4"永久",1,0) //如果A4包含永久,条件格式如下: OR($D5<60,$E5<60,$F5<60) 求取任意科目不及格数据 AND($D5<60,$E5<60,$F5<60) 若所有科目都不及格 显示为红色 IF($H4<EDATE…...
Ubuntu执行sudo apt-get update失败的解决方法
Ubuntu版本:24.04.1 报错信息: Clearsigned file isnt valid, got NOSPLIT (does the network require authentication?) 如果你在执行以上命令的时候也出现了上面这样的错误提示,先检查一下是不是网络问题,如果确定不是&…...
torch.nn.functional的用法
文章目录 介绍激活函数示例 损失函数示例 卷积操作示例 池化示例 归一化操作示例 Dropout示例 torch.nn.functional 与 torch.nn 的区别 介绍 torch.nn.functional 是 PyTorch 中的一个模块,提供了许多函数式的神经网络操作,包括激活函数、损失函数、卷…...
最新常见的图数据库对比,选型,架构,性能对比
图数据库排名 地址:https://db-engines.com/en/ranking/graphdbms 知识图谱查询语言 SPARQL、Cypher、Gremlin、PGQL 和 G-CORE 语法 / 语义 / 特性 SPARQL Cypher Gremlin PGQL G-CORE 图模式匹配查询 语法 CGP CGP CGP(无可选)1 CGP CGP 语义 子…...
UE5材质节点Camera Vector/Reflection Vector
Camera Vector相机向量,输出像素到相机的方向,结果归一化 会随着相机移动而改变 Reflection Vector 反射向量,物体表面法线反射到相机的方向,x和y和camera vector相反 配合hdr使用...
NextCloud服务安装与配置教程
NextCloud服务安装与配置教程 什么是 NextCloud: Nextcloud 是一款开源的私有云存储和协作平台,允许用户在自己的服务器上托管数据并管理团队协作。它可以作为一个功能丰富、安全可靠的替代方案,与商业云服务(如 Google Drive、Dropbox)相比提供更多控制和隐私保护。简单来…...
详解GPT-信息抽取任务 (GPT-3 FAMILY LARGE LANGUAGE MODELS)
GPT-3 FAMILY LARGE LANGUAGE MODELS Information Extraction 自然语言处理信息提取任务(NLP-IE):从非结构化文本数据中提取结构化数据,例如提取实体、关系和事件 [164]。将非结构化文本数据转换为结构化数据可以实现高效的数据处…...
MySQL
我目前正在学习SQL语句,我所了解到的MySQL其实是一堆服务器,在下载服务器的时候,可以选择下载一些客户端,MySQL会自带一些客户端,像类似于终端的小黑框,还有什么bench;我还是喜欢外观好看的客户端 !我学SQL语句目前学到了数据类型,有数值型的,字符型的,二进制型的,值得一提的是…...
大模型RL算法梳理:从全量词元到部分词元的路径演化
一、 引言:大模型强化学习算法的演化格局 近年来,以 OpenAI 的 o1 系列、DeepSeek 的 R1,以及 Qwen 系列模型为代表,大语言模型在数学证明、代码生成等长链路推理任务中展现出更强的稳定性与推理深度。 在这一背景下,面…...
十分钟用快马AI搭建中科院期刊分区查询工具原型
最近在帮实验室整理投稿期刊清单时,发现中科院分区查询是个高频需求。每次都要登录官网、输入验证码、反复跳转页面,特别影响效率。于是想做个简易查询工具,正好用InsCode(快马)平台试试快速原型开发,没想到十分钟就搭出了可用版本…...
别再只会用Arduino了!用ESP8266+MicroPython快速搭建你的第一个物联网小项目(附完整代码)
用MicroPython解锁ESP8266的物联网潜能:10分钟搭建温湿度监测系统 当提到物联网开发时,大多数人的第一反应可能是Arduino和C。但今天,我要带你体验一种更高效、更友好的方式——MicroPython。这种基于Python的嵌入式编程语言,让物…...
Unity UGUI实战:手把手教你打造一个可拖拽、可弯曲的UI连线组件(附完整源码)
Unity UGUI实战:打造可拖拽、可弯曲的智能连线系统 在游戏开发中,可视化连接系统是构建技能树、流程图、科技树等复杂UI结构的核心组件。传统实现往往局限于静态线条或简单的直线连接,缺乏交互性和动态美感。本文将带你从零构建一个支持实时拖…...
ESLint-Plugin-Unicorn规则优先级设置终极指南:如何平衡代码质量和开发效率
ESLint-Plugin-Unicorn规则优先级设置终极指南:如何平衡代码质量和开发效率 【免费下载链接】eslint-plugin-unicorn More than 100 powerful ESLint rules 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-unicorn ESLint-Plugin-Unicorn是一个…...
Bambu Studio 3D打印切片实战指南:从技术原理到场景应用
Bambu Studio 3D打印切片实战指南:从技术原理到场景应用 【免费下载链接】BambuStudio PC Software for BambuLab and other 3D printers 项目地址: https://gitcode.com/GitHub_Trending/ba/BambuStudio Bambu Studio作为一款专为3D打印优化的开源切片软件&…...
Awoo Installer:让Switch游戏安装像呼吸一样简单
Awoo Installer:让Switch游戏安装像呼吸一样简单 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 还在为Switch游戏安装的各种繁琐步骤头…...
VS2022 + WinForms:从拖控件到写逻辑,手把手带你做出第一个C#计算器
VS2022 WinForms:从拖控件到写逻辑,手把手带你做出第一个C#计算器 第一次打开Visual Studio 2022时,那个闪亮的启动界面可能会让你既兴奋又不知所措。作为微软最新的集成开发环境,VS2022为C#开发者提供了强大的工具链࿰…...
太方便了!农村自建房设计新神器,二三维设计 + 扫码看模型
还在为农村自建房设计发愁?手绘图纸看不懂、修改慢、施工易出错?飞扬集成设计系统,专为农村自建房打造,一键实现二三维一体化设计,还能扫码查看轻量化 3D 模型,让建房更高效、更直观、更省心!一…...
