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

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

news 来源：原创 2025/9/14 9:37:30

问：

现在有一个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字段然后拼接成一个逗号分隔的字符串

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

编程日记 2025/9/14 9:37:30

ES 客户端 API 二次封装思想

ES 客户端 API 二次封装思想网页端 ： ip5601 索引创建数据新增数据查询数据删除因为json串会出现在代码中，为了让用户更容易去添加数据所以去封装它。思想：为了让json串变得更加容易添加，封装最主要是为了简化正文的…...

编程日记 2025/9/8 18:01:08

《Kettle保姆级教学-日志写入数据库（通过修改kettle.properties一劳永逸）》

目录一、配置转换属性二、修改kettle.properties文件一、配置转换属性双击空白处，进入配置页面执行转换可以看到日志已写入数据库二、修改kettle.properties文件第一步的方式只能对某个转换/作业生效，怎么做到所有的转换/作业都可以生效呢&…...

编程日记 2025/9/14 23:36:11

SQL注入练习

目录一、如何绕过 information schema 字段过滤注入二、如何绕过 order by 语句过滤注入三、seacmsv9 实现报错注入数据一、如何绕过 information schema 字段过滤注入 1、使用其他系统表，不同数据库有各自的系统表，可替代information_schema。 …...

编程日记 2025/9/14 20:21:25

【大模型】量化、剪枝、蒸馏

大模型的量化、剪枝和蒸馏是三种常用的模型优化技术，旨在减少模型的复杂性，降低计算资源消耗，并加速推理过程。下面是每种技术的详细介绍： 1. 量化（Quantization） 量化是将浮点数表示的模型参数&#xff…...

编程日记 2025/9/14 23:35:11

Feign 类型转换问题解析：如何正确处理 `ResponseEntity＜byte[]＞` 返回值

在微服务架构中，Feign 是一种常见的用于服务间调用的客户端，它允许我们通过声明式接口来调用远程服务。使用 Feign 时，我们通常通过接口方法的返回类型来接收服务的响应体。然而，某些情况下，我们会遇到 Feign 无法正确解析响应体类型的问题，尤其是当服务返回一个如 Respo…...

编程日记 2025/9/9 3:27:22

最快安装ESP8266 ESP832 开发板·Arduino环境的方法

直接去官网找这种exe然后直接运行就好他会自动识别安装请点击此处下载插件安装文件（提取码：49c1） 去官网可以找到最新的，但是这种方法有个弊端你更新不了，所以还要添加链接到首选项 http://arduino.esp8266.com/st…...

编程日记 2025/9/9 15:02:10

最新版本SpringAI接入DeepSeek大模型，并集成Mybatis

当时集成这个环境依赖冲突，搞了好久，分享一下依赖配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instan…...

编程日记 2025/9/14 23:35:12

【工具变量】公司企业数字领导力（2004-2023年）

数据简介：企业数字化领导力是指在数字经济时代，领导者通过战略性地使用数字资产、引领组织变革，使企业在数字化环境中获得持续成功的能力。对于上市公司而言，这种领导力尤为重要，因为它直接关系到企业的战略方向、市场…...

编程日记 2025/9/11 15:23:17

LeetCode 动态规划环形子数组的最大和

环形子数组的最大和给定一个长度为 n 的环形整数数组 nums ，返回 nums 的非空子数组的最大可能和。环形数组意味着数组的末端将会与开头相连呈环状。形式上， nums[i] 的下一个元素是 nums[(i 1) % n] ， nums[i] 的前一个元素是 nums[(…...

编程日记 2025/9/14 7:28:14

毕业项目推荐：基于yolov8/yolo11的野生菌菇检测识别系统（python+卷积神经网络）

文章目录概要一、整体资源介绍技术要点功能展示：功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出（xls格式）功能6 支持切换检测到的目标查看二、数据集三、算法介绍1. YO…...

编程日记 2025/9/11 23:03:30

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙OpenHarmony的智能家居综合应用系统 1. 智能安防与门禁系统1) 系统概述2) 系统架构3）关键功能实现4）安全策略5）总结 2.环境智能调节系统1）场景描述2）技术实现3）总结 3.健康管理与睡眠监测1&…...

编程日记 2025/9/14 23:36:12

C语言【指针篇】（三）

C语言【指针篇】（三） 前言正文1. 数组名的理解2. 使用指针访问数组3. 一维数组传参的本质4. 冒泡排序5. 二级指针6. 指针数组7. 指针数组模拟二维数组总结前言本文主要基于前面对指针的掌握，进一步学习：数组名的理解、使用指针…...

编程日记 2025/9/10 19:44:11

【嵌入式Linux应用开发基础】网络编程(4)：UDP协议

目录一、UDP 协议概述二、UDP 协议特点三、UDP协议的字段格式四、UDP协议的数据传输过程五、嵌入式UDP编程核心API 六、UDP 在嵌入式 Linux 中的编程实现 6.1 UDP 服务器代码示例 6.2 UDP 客户端代码示例七、UDP 协议的应用场景八、UDP 协议的优缺点 8.1 优点…...

编程日记 2025/9/14 23:35:12

PS渐变工具

渐变工具：（颜色条起点到终点为前景色到背景色） 渐变shift：垂直、水平、45度渐变工具–》仿色：让渐变变得细腻。仿色值高，过渡柔和，仿色值低，过渡粗糙渐变工具–》渐变编辑器&am…...

编程日记 2025/9/8 16:55:17

win11系统通过WSL安装ubuntu

Linux 和Windows windows 属于单用户、多任务 Linux属于多用户多任务。Linux一切皆文件 https://blog.csdn.net/ddafei/article/details/142798010 一、启用WSL功能首先，你需要在Windows上启用WSL功能。打开“控制面板”。点击“程序” > “启用或关闭Windo…...

编程日记 2025/9/10 18:18:24

Sqoop从入门到使用

安装和配置修改文件配置：修改文件名将（sqoop-env-template.sh改为sqoop-env.sh） 编辑sqoop-env.sh内部文本，修改调用文件位置将sqoop-env.sh，配置到全局变量中，方便调用。查看正常运用第一类&#xff1…...

编程日记 2025/9/14 0:24:43

深度学习奠基作 AlexNet 论文阅读笔记（2025.2.25）

文章目录训练数据集数据预处理神经网络模型模型训练正则化技术模型性能其他补充训练数据集模型主要使用2010年和2012年的 ImageNet 大规模视觉识别挑战赛（ILSVRC）提供的 ImageNet 的子集进行训练，这些子集包含120万张图像。最终&#xff…...

编程日记 2025/9/14 16:34:07

解决python项目无法安装openai模块的问题

问题描述： pip install openai Fatal error in launcher: Unable to create process using ‘“e:\private\github\navigation_site.venv\Scripts\python.exe” “E:\private\github\my_project\navigation_site.venv\Scripts\pip.exe” install OpenAI’: ??? 这…...

编程日记 2025/9/14 10:37:54

项目实践之 pdf简历的解析和填充（若依+vue3）

文章目录环境背景最终效果前端讲解左侧模块解析右侧上传模块解析前端步骤后端讲解代码前端环境背景若依前后端分离框架 vue最后边附有代码哦最终效果前端讲解左侧模块解析 1、左侧表单使用el-form 注意： 1、prop出现的字段，需要保证是该类所…...

编程日记 2025/9/12 0:16:19

RAGS评测后的数据如何利用influxdb和grafan 进行数据汇总查看

RAGS（通常指相关性、准确性、语法、流畅性）评测后的数据能借助 InfluxDB 存储，再利用 Grafana 进行可视化展示，实现从四个维度查看数据，并详细呈现每个问题对应的这四个指标情况。以下是详细步骤： 1. 环境准备 InfluxDB 安装与配置依据自身操作系统，从 InfluxDB 官网下…...

编程日记 2025/9/14 18:56:25

本地部署阿里的万象2.1文生视频（Wan2.1-T2V-1.3B）模型

文章目录 （零）在线体验（一）本地部署（1.1）克隆仓库（1.2）安装依赖（1.2.1）安装 flash-attention（1.2.2）重新安装依赖（1.2.3&a…...

编程日记 2025/9/14 23:33:30

centos设置 sh脚本开机自启动

1. start.sh脚本 #!/bin/bash# 依赖docker，等待xxx容器完全启动 sleep 60curl -X POST "localhost:8381/models?urlmymodel.mar&model_namemymodel&batch_size1&max_batch_delay10&initial_workers1"sudo /usr/local/nginx/sbin/nginx …...

编程日记 2025/9/14 18:51:08

一文读懂什么是K8s Admission Controller

#作者：曹付江文章目录 1、什么是 Admission Controllers？2、如何创建 Admission Controllers？3、Admission 控制器的最佳实践 K8s 中的操作与安全标准执行机制： 1、什么是 Admission Controllers？ Admission contro…...

编程日记 2025/9/14 23:35:13

江协科技/江科大-51单片机入门教程——P[1-3] 单片机及开发板介绍

前言：本节主要的任务是了解一下 51 单片机和所用的普中51开发板。目录一、单片机介绍二、单片机的应用领域三、STC89C52单片机四、命名规则五、单片机内部拆解六、单片机内部结构图七、单片机管脚图八、单片机最小系统九、开发板介绍十、开发…...

编程日记 2025/9/14 16:25:02

一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 不管是开发网站还是后台管理系统，我们页面里多多少少有公共的模块。比如博客网站，就有公共的头部&…...

编程日记 2025/9/14 21:56:23

4.3MISC流量分析练习-wireshark-https

流量分析题目的例题 1.了解wireshark的过滤方式 2.了解tls跟ssl协议基本还原 3.了解xor基本变换方式，获取flag 附件是一个流量包，打开之后有各种流量，但是分析无果，然后丢到kali中使用binwalk进行分析，发现有一个r…...

编程日记 2025/9/12 1:52:25

wifi5和wifi6，WiFi 2.4G、5G，五类网线和六类网线，4G和5G的区别

wifi5和wifi6的区别是Wi-Fi 5和Wi-Fi 6的选择与路由器密切相关。路由器是创建和管理无线网络的设备，它决定了网络的类型和性能。具体来说：路由器的标准支持：路由器可以支持不同的Wi-Fi标准，如Wi-Fi 5（802.11ac）和Wi-Fi 6（802.11ax）。支持Wi-Fi 6的路由器能够提供更高…...

编程日记 2025/9/14 23:36:12

【二分查找】P9698 [GDCPC2023] Path Planning|普及

本文涉及的基础知识点本博文代码打包下载 C二分查找 [GDCPC2023] Path Planning 题面翻译【题目描述】有一个 n n n 行 m m m 列的网格。网格里的每个格子都写着一个整数，其中第 i i i 行第 j j j 列的格子里写着整数 a i , j a_{i, j} ai,j。从 0…...

编程日记 2025/9/14 23:35:10

请介绍一下Java的面向对象特性

Java是一种纯面向对象的语言，它支持类、继承、封装和多态等面向对象的基本概念。以下是Java面向对象特性的详细介绍： 一、封装封装是面向对象编程的核心思想之一，它指的是将对象的属性和方法结合在一起，并隐藏对象的内部实现细…...

编程日记 2025/9/13 22:36:14

使用ZFile打造属于自己的私有云系统结合内网穿透实现安全远程访问

文章目录前言1.关于ZFile2.本地部署ZFile3.ZFile本地访问测试4.ZFile的配置5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定ZFile公网地址前言在数字化的今天，我们每个人都是信息的小能手。无论是职场高手、摄影达人还是学习狂人，每天都在创造…...

编程日记 2025/9/10 17:07:06

Spring 源码硬核解析系列专题（八）：Spring Security 的认证与授权源码解析

在前几期中，我们从 Spring 核心到 Spring Boot，再到 Spring Cloud，逐步探索了 Spring 生态的底层原理。作为企业级应用的关键组件，Spring Security 提供了全面的安全解决方案，包括认证（Authentication）和授权（Authorization）。本篇将深入 Spring Security 的源码，剖析…...

编程日记 2025/9/11 11:18:51

Windows 图形显示驱动开发-WDDM 3.2-自动显示切换(七)

亮度数据为了确保用户不会因为切换而注意到亮度变化，GPU0 和 GPU1 显示的所有亮度属性都必须相同。此要求可确保在切换 GPU0 至 GPU1 之前的任何亮度级别，在切换至 GPU1 后都可以支持。为此，GPU0 和 GPU1 的驱动程序必须： 使…...

编程日记 2025/9/13 9:08:49

Android ObjectBox数据库使用与集成指南

ObjectBox其核心特点ObjectBox与 SQLite 和 Realm 的对比Android集成ObjectBox创建ObjectBox实体对象创建ObjectBox操作管理类OBManager在Application初始化ObjectBox插入或更新数据查询数据统计数据分页数据查询删除数据总结今天分享一套Android另一个数据库ObjectBox。Object…...

编程日记 2025/9/10 11:41:48

C++ Qt常见面试题（3）：Qt内存管理机制

Qt 内存管理机制是其框架的重要组成部分，目的是简化开发者对内存的管理，减少内存泄漏的风险，同时提供高效的资源使用方式。Qt 的内存管理机制主要依赖于对象树（Object Tree）和父子关系（Parent-Child Relationship）的设计，通过智能管理对象的生命周期来实现自动化的…...

编程日记 2025/9/14 20:21:26

到底什么是认证？

哈喽！欢迎来到程序视点，我是小二哥！本店菜品如下： #风暴过后以桶认证和授权什么是认证认证 (Authentication) 是根据凭据验明访问者身份的流程。即验证“你是你所说的那个人”的过程。身份认证，通常通过用户名…...

编程日记 2025/9/13 20:53:24

量子计算可能改变世界的四种方式

世界各地的组织和政府正将数十亿美元投入到量子研究与开发中，谷歌、微软和英特尔等公司都在竞相实现量子霸权。这其中的利害关系重大，有这么多重要的参与者，量子计算机的问世可能指日可待。为做好准备，，我们必须了…...

编程日记 2025/9/9 16:56:23

【Web安全】图片验证码DOS漏洞

文章目录免责声明一、漏洞原理二、测试步骤三、测试案例四、修复方式免责声明在网络安全领域，技术文章应谨慎使用，遵守法律法规，严禁非法网络活动。未经授权，不得利用文中信息进行入侵，造成的任何后果，由使用者自行承担，本文作者不负责。提供的工具仅限学习使用，严禁…...

编程日记 2025/9/9 16:36:59

鸿蒙Next如何自定义标签页

前言项目需求是展示标签，标签的个数不定，一行展示不行就自行换行。但是，使用鸿蒙原生的 Grid 后发现特别的难看。然后就想着自定义控件。找了官方文档，发现2个重要的实现方法，但是，官方的demo中讲的很少&…...

编程日记 2025/9/9 18:08:00

一周学会Flask3 Python Web开发-Jinja2模板过滤器使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Jinja2中，过滤器(filter)是一些可以用来修改和过滤变量值的特殊函数，过滤器和变量用一个竖线 | &a…...

编程日记 2025/9/9 19:49:28

HarmonyOS 5.0应用开发——鸿蒙接入高德地图实现POI搜索

【高心星出品】文章目录鸿蒙接入高德地图实现POI搜索运行结果：准备地图编写ArkUI布局来加载HTML地图鸿蒙接入高德地图实现POI搜索在当今数字化时代，地图应用已成为移动设备中不可或缺的一部分。随着鸿蒙系统的日益普及，如何在鸿蒙应用中…...

编程日记 2025/9/11 3:49:29

浅谈HTTP及HTTPS协议

1.什么是HTTP？ HTTP全称是超文本传输协议，是一种基于TCP协议的应用非常广泛的应用层协议。 1.1常见应用场景一.浏览器与服务器之间的交互。二.手机和服务器之间通信。三。多个服务器之间的通信。 2.HTTP请求详解 2.1请求报文格式我们首先看一下…...

编程日记 2025/9/11 19:45:03

内存泄漏指什么？常见的内存泄漏有哪些？

内存泄漏是指程序在运行过程中，由于某些原因导致程序无法释放已经不再使用的内存，使得这部分内存持续被占用，最终可能导致系统可用内存逐渐减少，严重时会影响系统性能甚至导致程序崩溃。（内存泄漏是指程序中已经分配的…...

编程日记 2025/9/10 1:41:41

FFmpeg视频处理入门级教程

一、FFmpeg常规处理流程 #mermaid-svg-W8X1llNEyuYptV3I {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-W8X1llNEyuYptV3I .error-icon{fill:#552222;}#mermaid-svg-W8X1llNEyuYptV3I .error-text{fill:#552222;str…...

编程日记 2025/9/11 14:29:59

PINN求解固体力学问题——论文加代码

PINN求解固体力学问题——论文加代码 1. 训练2. 可视化论文：Physics-Informed Deep Learning and its Application in Computational Solid and Fluid Mechanics 1. 训练 # %load Plane_Stress_W-PINNs.py """ Forward Problem for Plane Stress …...

编程日记 2025/9/14 13:21:24

HC32F460_SCI驱动（一）

在开始介绍HC32F460的SCI驱动之前，先重点说明一下功能组与串口相关参数，以便于更好的描述SCI驱动。 1. 功能组 1.1 基本概念 HC32F460的引脚功能复用机制通过Func_Grp（功能组）实现，其灵活性显著高于传统单片机（如STM32系列）。每个引脚支持多种外设功能，具体功能通过选…...

编程日记 2025/9/11 21:21:02

程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。这一节我们来学习指针的相关知识，学习内存和地址，指针变量和地址，包…...

编程日记 2025/9/10 6:42:12

QT：QPen、QBrush、与图形抗锯齿的关联

QPen QPen 是 Qt 框架中用于定义绘图时使用的画笔属性的类。在使用 QPainter 进行 2D 绘图时，QPen 可以控制线条的外观，比如线条的颜色、宽度、样式（如实线、虚线等）、端点样式（如方形端点、圆形端点等）和…...

编程日记 2025/9/13 3:49:57

数据结构秘籍（一）线性数据结构

1.数组数组（Array）是一种很常见的数据结构。它由相同类型的元素（element）组成，并且是使用一块连续的内存来存储。我们直接可以利用元素的索引（index）计算出该元素对应的存储地址。数组的特…...

编程日记 2025/9/12 9:13:13

【数据分享】2000-2024年全国逐年归一化植被指数（NDVI）栅格数据（年平均值）

NDVI，全名为Normalized Difference Vegetation Index，中文名称为归一化植被指数。这个指数可以用来定性和定量评价植被覆盖及其生长活力，我们也可以简单地将它理解为体现植被密度和健康状况的一个指标。之前我们给大家分享了来源于MOD13A3数…...

编程日记 2025/9/11 11:59:13