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…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
