当前位置: 首页 > 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.启动…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...