点击取消按钮,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]。将非结构化文本数据转换为结构化数据可以实现高效的数据处…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
