当前位置: 首页 > news >正文

js:根据后端返回的数组取出每一个数组的keyword字段然后拼接成一个逗号分隔的字符串

问:

现在有一个el-select,

后端接口返回数据为keyword:'xxx',referenceNum:1,tagId:'132sf32fasdfaf'组成的数组,

现在select是多选,

但是但我选择多个下拉框选项后,后端需要前端返回的数据tagIds字段需要时一个字符串,比方:'132sf32fasdfaf,132sf32fasdfaf,132sf32fasdfaf'这样的字符串,中间逗号要是英文的逗号请问怎么写?我使用的是vue3的setup语法

[{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},
]
假设当前选中了五个多选el-select

回答:

你可以使用 el-select 的 @change 事件来监听选项的变化,然后将选中的选项的 tagId 提取出来并拼接成一个字符串。

如果 selectedTags 是一个字符串而不是数组,那么你需要先将其转换为数组,然后再进行处理。以下是修改后的代码:

<template><div><el-selectv-model="selectedTags"multiple@change="handleChange"placeholder="请选择"><el-optionv-for="item in options":key="item.tagId":label="item.keyword":value="item.tagId"></el-option></el-select></div>
</template><script setup>
import { ref } from 'vue';const options = ref([{ keyword: 'xxx1', referenceNum: 1, tagId: '132sf32fasdfaf1' },{ keyword: 'xxx2', referenceNum: 2, tagId: '132sf32fasdfaf2' },{ keyword: 'xxx3', referenceNum: 3, tagId: '132sf32fasdfaf3' }
]);const selectedTags = ref('');const handleChange = (value) => {selectedTags.value = value.join(',');console.log(selectedTags.value); // 输出拼接后的字符串// 你可以在这里将 selectedTags.value 发送给后端
};
</script>

在这个示例中,我们将 el-select 的 value 绑定到 item.tagId,这样 selectedTags 将是一个包含 tagId 的数组。在 handleChange 方法中,我们将数组转换为用英文逗号分隔的字符串,并将其赋值给 selectedTags。这样就可以正确地拼接用户选择的选项的 tagId

相关文章:

js:根据后端返回的数组取出每一个数组的keyword字段然后拼接成一个逗号分隔的字符串

问&#xff1a; 现在有一个el-select&#xff0c; 后端接口返回数据为keyword:xxx,referenceNum:1,tagId:132sf32fasdfaf组成的数组&#xff0c; 现在select是多选&#xff0c; 但是但我选择多个下拉框选项后&#xff0c;后端需要前端返回的数据tagIds字段需要时一个字符串…...

基于大模型的肺纤维化预测及临床方案研究报告

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与方法 二、大模型技术概述 2.1 大模型的基本原理 2.2 大模型在医疗领域的应用现状 三、肺纤维化相关知识 3.1 肺纤维化的病因与发病机制 3.2 肺纤维化的临床症状与诊断方法 3.3 肺纤维化的治疗现状与挑战 四、大模型…...

7. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--Ocelot 网关--路由

路由是API网关的核心功能&#xff0c;对系统性能和可靠性至关重要。路由通过定义规则&#xff0c;将客户端请求准确地转发到相应的后端服务&#xff0c;确保请求能够正确处理&#xff0c;简化了微服务架构中的服务调用逻辑。有效的路由配置能够提高系统的灵活性和可维护性。 一…...

【GESP】C++二级模拟 luogu-b3995, [GESP 二级模拟] 小洛的田字矩阵

GESP二级模拟题&#xff0c;多层循环、分支语句练习&#xff0c;难度★✮☆☆☆。 题目题解详见&#xff1a;https://www.coderli.com/gesp-2-luogu-b3995/ 【GESP】C二级模拟 luogu-b3995, [GESP 二级模拟] 小洛的田字矩阵 | OneCoderGESP二级模拟题&#xff0c;多层循环、分…...

监督学习——基于线性回归的波士顿房价预测:理论、实践与评估

基于线性回归的波士顿房价预测:理论、实践与评估 文章目录 基于线性回归的波士顿房价预测:理论、实践与评估一、引言二、线性回归基础理论2.1 线性回归原理2.2 线性回归在房价预测中的应用逻辑三、波士顿房价数据集介绍3.1 数据集概述3.2 特征说明3.3 目标变量四、波士顿房价…...

Selenium 调用模型接口实现功能测试

要使用 Selenium 调用模型接口实现功能测试,可按以下步骤进行: 1. 环境准备 安装 Selenium:使用 pip install selenium 安装 Selenium 库。安装浏览器驱动:根据使用的浏览器(如 Chrome、Firefox 等)下载对应的驱动,并将其添加到系统的环境变量中。例如,Chrome 浏览器需…...

回调函数的用法

回调函数的基本用法 回调函数是一种被作为参数传递给另一个函数的函数&#xff0c;接收回调函数作为参数的函数在合适的时候会调用这个回调函数。回调函数为代码提供了更高的灵活性和可扩展性&#xff0c;下面为你详细介绍回调函数的基本用法。 基本概念 回调函数的核心在于函…...

springboot实现文件上传到华为云的obs

一、前言 有时在项目中需要使用一些存储系统来存储文件&#xff0c;那么当项目要接入obs作为存储系统时&#xff0c;就会利用obs来进行文件的上传下载&#xff0c;具体实现如下。 二、如何通过obs实现文件的上传下载&#xff1f; 1.添加相关的obs的maven依赖。 <dependency…...

南京布局产业园剖析:成都树莓集团的战略逻辑

在数字产业飞速发展的当下&#xff0c;成都树莓集团在南京布局产业园&#xff0c;这一举措蕴含着深刻的战略考量&#xff0c;是基于对市场环境、产业趋势以及自身发展需求的综合研判。 一、政策利好与发展机遇 南京作为长三角地区的重要城市&#xff0c;在数字经济发展方面享有…...

C++ QT 6.6.1 QCustomPlot的导入及使用注意事项和示例 | 关于高版本QT使用QCustomPlot报错问题解决的办法

C QT 6.6.1 QCustomPlot的导入及使用注意事项和示例 | 关于高版本QT使用QCustomPlot报错问题解决的办法 记录一下 qmake .pro文件的配置 QT core gui printsupportgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compil…...

【算法】哈希表详解

【算法】哈希表详解 1. 哈希表的基本概念2. 哈希表的优缺点3. 哈希表的实现方法4. 哈希表的应用场景5. 哈希表的性能优化6. 哈希表 vs 其他数据结构7. 总结 哈希表&#xff08;Hash Table&#xff09; 是一种高效的数据结构&#xff0c;用于存储键值对&#xff08;Key-Value Pa…...

【红队利器】单文件一键结束火绒6.0

关于我们 4SecNet 团队专注于网络安全攻防研究&#xff0c;目前团队成员分布在国内多家顶级安全厂商的核心部门&#xff0c;包括安全研究领域、攻防实验室等&#xff0c;汇聚了行业内的顶尖技术力量。团队在病毒木马逆向分析、APT 追踪、破解技术、漏洞分析、红队工具开发等多个…...

Docker小游戏 | 使用Docker部署star-battle太空飞船射击小游戏

Docker小游戏 | 使用Docker部署star-battle太空飞船射击小游戏 前言项目介绍项目简介项目预览二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署star-battle网页小游戏下载镜像创建容器检查容器状态检查服务端口安全设置四、访问star-battle网页小游戏五、总…...

【EB-06】SystemCreator dbc转arxml

SystemCreator dbc转arxml 1. SystemCreator 意义2. SystemCreator使用方法2.1 实现步骤2.2 参考官方文档方法1. SystemCreator 意义 EB Tresos 对dbc直接导入的支持不是很完善,dbc也不是AUTOSAR标准的数据库文件,EB建议所有通信矩阵通过ARXML交互比较合理(AUTOSAR定义的)…...

(0)阿里云大模型ACP-考试回忆

这两天通过了阿里云大模型ACP考试&#xff0c;由于之前在网上没有找到真题&#xff0c;导致第一次考试没有过&#xff0c;后面又重新学习了一遍文档才顺利通过考试&#xff0c;这两次考试内容感觉考试题目90%内容是覆盖的&#xff0c;后面准备分享一下每一章的考题&#xff0c;…...

按键精灵鹰眼中控:ios多设备管理工具

在当今数字化时代&#xff0c;高效管理多设备已成为许多企业和个人的迫切需求。无论是游戏多开、自动化测试&#xff0c;还是电商运营&#xff0c;如何同时操作多台设备并确保精准执行&#xff0c;一直是一个难题。现在&#xff0c;按键精灵的鹰眼群控功能为您提供了完美的解决…...

__对于初学者的CCS 汉化

IDE&#xff1a;Code Composer Studio 20.0.2 CCS安装后默认是英文&#xff0c;目前最新的20版其Help工具栏是没有安装软件包的选项。不过&#xff0c;想要汉化还有更简单的方法 安装插件 在左边找到扩展&#xff0c;然后在框内搜索Chinese&#xff0c;可以找到两个语言插件&am…...

JavaScript 系列之:Ajax、Promise、Axios

前言 同步&#xff1a;会阻塞。同步代码按照编写的顺序逐行依次执行&#xff0c;只有当前的任务完成后&#xff0c;才会执行下一个任务。 异步&#xff1a;异步代码不会阻塞后续代码的执行。当遇到异步操作时&#xff0c;JavaScript 会将该操作放入任务队列中&#xff0c;继续…...

Vidma Ver.2.14.0 高级版

Vidma Ver.2.14.0 高级版 Vidma 是一款易于使用的视频编辑器&#xff0c;提供多种音乐和流行视频效果选择&#xff0c;让您的视频在社交媒体上脱颖而出。您可以通过添加 swooshing 文本、流行效果、复古滤镜、精美贴纸、平滑过渡等等&#xff0c;轻松地从您的宝贵时刻创建有意…...

Redis Lua Script 溢出漏洞(CVE-2024-31449)

目录 漏洞描述 目前受影响的Redis版本&#xff1a; 安全版本 解决建议 升级Redis版本 查看旧redis版本信息 备份Redis数据 1.查看目前redis的key 2.备份数据 3.查看备份文件地址 4.将旧Redis安装目录备份 安装新版本Redis 1.下载redis安装包 2.安装redis 3.启动…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...