ave-form.vue 组件中 如何将产品名称发送给后端 ?
如何将产品名称发送给后端。
在这段代码中,产品名称(productName)的处理和发送主要发生在 save() 方法中。让我逐步分析:
- 产品ID的选择:
<w-form-selectv-model="form.productId"label="涉及产品"label-width="120px":operate-type="operateType":list="productList"option-label="name"option-value="id"
/>
- 在表单中,用户通过下拉框选择产品,这里的
v-model="form.productId"会绑定所选产品的id到form.productId。 :list="productList"是产品列表数据,来自getProducts()方法从后端获取的。option-label="name"表示下拉框显示的是产品的名称(name),而option-value="id"表示实际绑定的是产品的id。
- 获取产品名称:
在save()方法中,通过以下代码从productList中找到选中的产品并获取其名称:
const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)
this.productList是存储所有产品信息的数组。.find()方法根据form.productId(用户选择的产品ID)找到对应的产品对象。selectedProduct会包含该产品的所有信息,包括name(名称)。
- 准备发送的数据:
const data = {...this.form,productName: selectedProduct?.name || '', // 添加产品名称productPhotos: JSON.stringify(this.form.productPhotos),purchaseRecords: JSON.stringify(this.form.purchaseRecords)
}
- 这里创建了一个新的
data对象,使用展开运算符...this.form复制了表单中的所有字段。 productName: selectedProduct?.name || ''明确地将选中的产品名称添加到发送的数据中。如果selectedProduct存在,就取它的name,否则为空字符串。- 注意:
form.productId已经包含在...this.form中,所以后端会同时收到产品ID和产品名称。
- 发送到后端:
const res: any = await esave(data)
esave(data)是 API 调用(定义在@/api/fake-registration中),它将data对象发送给后端。- 因为
data中已经包含了productName,所以产品名称会作为请求的一部分发送出去。
总结
- 用户在界面上选择产品时,
form.productId保存了产品ID。 - 在提交时,
save()方法通过productId从productList中查找对应的产品名称,并将其赋值给data.productName。 - 最后,
data对象(包含productName和其他表单数据)通过esaveAPI 发送到后端。
如果后端需要的是产品名称而不仅仅是ID,这段代码已经确保了 productName 会被正确发送。
修改 ave-form.vue,在暂存和提交时添加 productName。
typescript:src/views/tools/fake-strategy/components/ave-form.vue
// ... 其他代码保持不变 ...export default class extends Vue {// ... 其他属性和方法保持不变 ...private async save() {// 从产品列表中获取选中产品的名称const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)const data = {...this.form,productName: selectedProduct?.name || '', // 添加产品名称productPhotos: JSON.stringify(this.form.productPhotos),purchaseRecords: JSON.stringify(this.form.purchaseRecords)}const res: any = await esave(data)if (res?.code === 0) {this.$emit('close', true)}}// ... 其他代码保持不变 ...
}
主要修改:
- 在
save方法中,根据选中的 productId 从 productList 中找到对应的产品 - 将产品名称 (productName) 添加到发送给后端的数据中
这样在点击暂存或提交按钮时,都会将产品名称一起发送给后端。

相关文章:
ave-form.vue 组件中 如何将产品名称发送给后端 ?
如何将产品名称发送给后端。 在这段代码中,产品名称(productName)的处理和发送主要发生在 save() 方法中。让我逐步分析: 产品ID的选择: <w-form-selectv-model"form.productId"label"涉及产品&q…...
DeepSeek行业应用实践报告-智灵动力【112页PPT全】
DeepSeek(深度搜索)近期引发广泛关注并成为众多企业/开发者争相接入的现象,主要源于其在技术突破、市场需求适配性及生态建设等方面的综合优势。以下是关键原因分析: 一、技术核心优势 开源与低成本 DeepSeek基于开源架构…...
【Markdown 语法简洁讲解】
Markdown 语法简洁语法讲解 什么是 Markdown1. 标题2. 列表3.文本样式4. 链接与图片5. 代码6. 表格7. 分割线8. 流程图9. 数学公式10. 快捷键11. 字体、字号与颜色 什么是 Markdown Markdown 是一种轻量级标记语言,通过简单的符号实现排版格式化,专注于…...
250301-OpenWebUI配置DeepSeek-火山方舟+硅基流动+联网搜索+推理显示
A. 最终效果 B. 火山方舟配置(一定要点击添加) C. 硅基流动配置(最好要点击添加,否则会自动弹出所有模型) D. 联网搜索配置 E. 推理过程显示 默认是没有下面的推理过程的显示的 设置步骤: 在Functions函…...
【3天快速入门WPF】12-MVVM
目录 1. 什么是MVVM2. 实现简单MVVM2.1. Part 12.2. Part 21. 什么是MVVM MVVM 是 Model-View-ViewModel 的缩写,是一种用于构建用户界面的设计模式,是一种简化用户界面的事件驱动编程方式。 MVVM 的目标是实现用户界面和业务逻辑之间的彻底分离,以便更好地管理和维护应用…...
查找Excel包含关键字的行(の几种简单快速方法)
需求:数据在后缀为xlsx的Excel的sheet1中且量比较大,比如几十万行几百列;想查找一个关键字所在的行,比如"全网首发"; 情况①知道关键字在哪一列 情况②不确定在哪一列,很多列相似又不同,本文演…...
性能测试分析和调优
步骤 性能调优的步骤 性能调优的步骤: 1.确定问题:根据性能测试的结果来分析确定bug。–测试人员职责 2.分析原因:分析问题产生的原因。----开发人员职责 3.给出解决方案:可以是修改软件配置、增加硬件资源配置、修改代码等----…...
(视频教程)Compass代谢分析详细流程及python版-R语言版下游分析和可视化
不想做太多的前情解说了,有点累了,做了很久的内容,包括整个分析,从软件安装和报错解决到后期下游python版-R语言版下游分析和可视化!单细胞代谢分析我们写过很多了,唯独少了最“高级”的compass,…...
【SQL】MySQL中的字符串处理函数:concat 函数拼接字符串,COALESCE函数处理NULL字符串
MySQL中的字符串处理函数:concat 函数 一、concat ()函数 1.1、基本语法1.2、示例1.3、特殊用途 二、COALESCE()函数 2.1、基本语法2.2、示例2.3、用途 三、进阶练习 3.1 条件和 SQL 语句3.2、解释 一、concat &…...
c++中深拷贝和浅拷贝的联系和区别
在 C 编程里,深拷贝和浅拷贝是两种不同的对象复制方式,它们在实现方式、资源管理和适用场景等方面存在显著差异。下面为你详细介绍它们的区别。 1. 基本概念 浅拷贝:浅拷贝仅仅复制对象的成员变量值。对于基本数据类型(如 int、d…...
Autotestplat 在多个平台和公司推荐使用!
1、 51Testing软件测试网 开源好用!推荐一款更轻量化的自动化测试平台! 2、程序员杨叔 从繁琐到简单!Autotestplat自动化测试平台搭建使用 3、一飞开源 [开源]一站式自动化测试平台及解决方案,支持接口、性能、UI测试 4、github h…...
字符串最后一个单词的长度
一:题目 二:思路 用rfind()函数倒着找第一个空格,返回的值为pos,然后打印size()-(pos1),posnpos就代表只有一个单词,则直接返回size #include <iostream> using namespace std; int main() {strin…...
【Linux】learning notes(3)make、copy、move、remove
文章目录 1、mkdir (make directory)2、rmdir (remove directory)3、rm(remove)4、>5、touch 新建文件6、mv(move)7、cp(copy) 1、mkdir (make…...
一、图像图像的基本概念
文章目录 一、分辨率概念二、图形图像的区别三、位图和矢量图的区别 一、分辨率概念 图形显示计数中的分辨率概念有三种,即屏幕分辨率、显示分辨率和显卡分辨率。它们既有区别又有着密切的联系,对图形显示的处理有极大的影响。 1.屏幕分辨率 显示器分辨…...
两道算法练习
力扣322零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的…...
利用 Python 爬虫进行跨境电商数据采集
1 引言2 代理IP的优势3 获取代理IP账号4 爬取实战案例---(某电商网站爬取)4.1 网站分析4.2 编写代码4.3 优化代码 5 总结 1 引言 在数字化时代,数据作为核心资源蕴含重要价值,网络爬虫成为企业洞察市场趋势、学术研究探索未知领域…...
设计模式--spring中用到的设计模式
一、单例模式(Singleton Pattern) 定义:确保一个类只有一个实例,并提供全局访问点 Spring中的应用:Spring默认将Bean配置为单例模式 案例: Component public class MySingletonBean {// Spring 默认将其…...
Qt控件中函数指针使用的最终版本,使用std::function
代码: class MyWidget : public QWidget { public:std::function<void(QResizeEvent* event)> pf_resizeEvent 0; protected:inline void resizeEvent(QResizeEvent* event) override {if (pf_resizeEvent ! 0)pf_resizeEvent(event);} };int main(int arg…...
Java中的泛型类 --为集合的学习做准备
学习目标 ● 掌握在集合中正确使用泛型 ● 了解泛型类、泛型接口、泛型方法 ● 了解泛型上下限 ● 了解基本的使用场景 1.有关泛型 1.1泛型的概念 泛型(Generics)是Java中引入的参数化类型机制,允许在定义类、接口或方法时使用类型参数&a…...
6.6.6 嵌入式SQL
文章目录 2个核心问题识别SQL语句主语言和SQL通信完整导图 2个核心问题 SQL语句嵌入高级语言需要解决的2个核心问题是:如何识别嵌入语句?如何让主语言(比如C,C语言)和SQL通信? 识别SQL语句 为了识别主语言中嵌入的SQL…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
