点击修改按钮图片显示有问题

问题可能出在表单数据的初始化上。在 ave-form.vue 中,我们需要处理一下从后端返回的图片数据,因为它们可能是 JSON 字符串格式。

vue:src/views/tools/fake-strategy/components/ave-form.vue
// ... existing code ...@Watch('value')watchValue(v: any) {this.$nextTick(() => {this.getProducts()// 处理图片数据const formData = {...v,productPhotos: v.productPhotos ? JSON.parse(v.productPhotos) : [],purchaseRecords: v.purchaseRecords ? JSON.parse(v.purchaseRecords) : []}this.form = formData})}// ... rest of the code ...

主要修改:

  1. watchValue 方法中,我们对 productPhotospurchaseRecords 字段进行了特殊处理
  2. 使用 JSON.parse 将字符串转换为数组
  3. 如果字段不存在或解析失败,则使用空数组作为默认值

这样修改后:

  • 当点击修改按钮打开表单时,图片数据会被正确解析
  • 图片组件会收到正确格式的数组数据
  • 图片应该能够正常显示了

这个修改假设后端返回的图片数据是 JSON 字符串格式。如果格式不同,我们可能需要做相应的调整。你能告诉我后端返回的图片数据具体是什么格式吗?

  • 后端返回的就是 JSON 字符串格式 的图片数据

在这里插入图片描述

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

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

相关文章

vue深拷贝:1、使用JSON.parse()和JSON.stringify();2、使用Lodash库;3、使用深拷贝函数(采用递归的方式)

文章目录 引言三种方法的优缺点在Vue中,实现数组的深拷贝I JSON.stringify和 JSON.parse的小技巧深拷贝步骤缺点:案例1:向后端请求路由数据案例2: 表单数据处理时复制用户输入的数据II 使用Lodash库步骤适用于复杂数据结构和需要处理循环引用的场景III 自定义的深拷贝函数(…

线性模型 - 支持向量机

支持向量机(SVM)是一种用于分类(和回归)的监督学习算法,其主要目标是找到一个最佳决策超平面,将数据点分为不同的类别,并且使得分类边界与最近的数据点之间的间隔(margin&#xff09…

记录一次解决springboot需要重新启动项目才能在前端界面展示静态资源的问题--------使用热部署解决

问题 使用sprinbootthymeleaf&#xff0c;前后端不分离&#xff0c;一个功能是用户可以上传图片&#xff0c;之后可以在网页展示。用户上传的图片能在对应的静态资源目录中找到&#xff0c;但是在target目录没有&#xff0c;导致无法显示在前端界面 解决 配置热部署 <depe…

【Python pro】函数

1、函数的定义及调用 1.1 为什么需要函数 提高代码复用性——封装将复杂问题分而治之——模块化利于代码的维护和管理 1.1.1 顺序式 n 5 res 1 for i in range(1, n1):res * i print(res) # 输出&#xff1a;1201.1.2 抽象成函数 def factorial(n):res 1for i in range(1…

[Web 信息收集] Web 信息收集 — 手动收集 IP 信息

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01&#xff1a;通过 DNS 服务获取域名对应 IP DNS 即域名系统&#xff0c;用于将域名与 IP 地址相互映射&#xff0c;方便用户访问互联网。对于域名到 IP 的转换过程则可以参考下面这篇…

大语言模型的评测

大语言模型评测是评估这些模型在各种任务和场景下的性能和能力的过程。 能力 1. 基准测试&#xff08;Benchmarking&#xff09; GLUE&#xff08;General Language Understanding Evaluation&#xff09;&#xff1a;包含多个自然语言处理任务&#xff0c;如文本分类、情感分…

Node.js与MySQL的深入探讨

Node.js与MySQL的深入探讨 引言 Node.js,一个基于Chrome V8引擎的JavaScript运行时环境,以其非阻塞、事件驱动的方式在服务器端应用中占据了一席之地。MySQL,作为一款广泛使用的开源关系型数据库管理系统,凭借其稳定性和高效性,成为了许多应用的数据库选择。本文将深入探…

STM32--SPI通信讲解

前言 嘿&#xff0c;小伙伴们&#xff01;今天咱们来聊聊STM32的SPI通信。SPI&#xff08;Serial Peripheral Interface&#xff09;是一种超常用的串行通信协议&#xff0c;特别适合微控制器和各种外设&#xff08;比如传感器、存储器、显示屏&#xff09;之间的通信。如果你…

基于定制开发开源AI大模型S2B2C商城小程序的商品选品策略研究

摘要&#xff1a;随着电子商务的蓬勃发展和技术的不断进步&#xff0c;商品选品在电商领域中的重要性日益凸显。特别是在定制开发开源AI大模型S2B2C商城小程序的环境下&#xff0c;如何精准、高效地选择推广商品&#xff0c;成为商家面临的一大挑战。本文首先分析了商品选品的基…

C#异步编程之async与await

一&#xff1a;需求起因 在 C# 中使用异步编程&#xff08;特别是使用 async 和 await 关键字&#xff09;通常是为了提高应用程序的响应性和性能&#xff0c;特别是在需要进行 I/O 操作或执行长时间运行的任务时。 常见应用场景如下&#xff1a; 1. 网络请求 HTTP 请求&…

PMP项目管理—整合管理篇—7.结束项目或阶段

文章目录 基本信息过程4W1HITTO输入工具与技术输出 收尾过程组项目收尾&#xff08;结束项目或阶段&#xff09;行政收尾/管理收尾 合同收尾&#xff08;结束采购&#xff09; 最终报告 基本信息 项目无论何因何时终止&#xff0c;都必须用结束项目或阶段过程来正式关闭。通过…

labview中VISA串口出现异常的解决方案

前两天在做项目时发现&#xff0c;当用VISA串口读取指令时出现了回复异常的情况&#xff0c;不管发什么东西就一直乱回&#xff0c;针对这个情况&#xff0c;后面在VISA串口中加了一个VISA寄存器清零的函数。加了之后果然好多了&#xff0c;不会出现乱回的情况&#xff0c;但是…

【GO】学习笔记

目录 学习链接 开发环境 开发工具 GVM - GO多版本部署 GOPATH 与 go.mod go常用命令 环境初始化 编译与运行 GDB -- GNU 调试器 基本语法与字符类型 关键字与标识符 格式化占位符 基本语法 初始值&零值&默认值 变量声明与赋值 _ 下划线的用法 字…

staruml绘制时序图和用例图

文章目录 1.文章介绍2.绘制用例图3.绘制时序图 1.文章介绍 之前&#xff0c;我们初步介绍了这个staruml软件的安装和如何使用这个软件对于uml类图进行绘制&#xff0c;当时我们是绘制了这个user类&#xff0c;实现了相关的接口&#xff0c;表示他们之间的关系&#xff0c;在今…

开放标准(RFC 7519):JSON Web Token (JWT)

开放标准&#xff1a;JSON Web Token 前言基本使用整合Shiro登录自定义JWT认证过滤器配置Config自定义凭证匹配规则接口验证权限控制禁用session缓存的使用登录退出单用户登录Token刷新双Token方案单Token方案 前言 JSON Web Token &#xff08;JWT&#xff09; 是一种开放标准…

使用 Polars 进行人工智能医疗数据分析(ICU数据基本测试篇)

引言 在医疗领域&#xff0c;数据就是生命的密码&#xff0c;每一个数据点都可能蕴含着拯救生命的关键信息。特别是在 ICU 这样的重症监护场景中&#xff0c;医生需要实时、准确地了解患者的病情变化&#xff0c;以便做出及时有效的治疗决策。而随着医疗技术的飞速发展&#x…

瑞芯微RK安卓Android主板GPIO按键配置方法,触觉智能嵌入式开发

触觉智能分享&#xff0c;瑞芯微RK安卓Android主板GPIO按键配置方法&#xff0c;方便大家更好利用空闲IO&#xff01;由触觉智能Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566四核处理器&#xff0c;树莓派卡片电脑设计&#xff0c;支持安卓Android、开源鸿蒙Open…

SSL 证书是 SSL 协议实现安全通信的必要组成部分

SSL证书和SSL/TLS协议有着密切的关系&#xff0c;但它们本质上是不同的概念。下面是两者的区别和它们之间的关系的表格&#xff1a; 属性SSL/TLS 协议SSL证书英文全称SSL&#xff08;Secure Sockets Layer&#xff09;&#xff0c;TLS&#xff08;Transport Layer Security&am…

QT:模型视图代理

Qt Model/View/Delegate&#xff08;MVD&#xff09;框架&#xff0c;它是 Qt 中用于实现数据显示和编辑的一种架构模式&#xff0c;主要由模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和委托&#xff08;Delegate&#xff09;三部分组成&#xff0c;…

PowerShell 执行策略:fnm管理软件安装nodejs无法运行npm,错误信息:about_Execution_Policies

通过fnm管理软件安装NodeJS后添加环境变量依然无法执行npm,提示无法加载文件&#xff0c;错误如下&#xff1a; PowerShell 执行策略简介&#xff1a; PowerShell 执行策略是一项安全功能&#xff0c;用于控制 PowerShell 加载配置文件和运行脚本的条件。 此功能有助于防止恶…