【Vue】前端向后端传值，将数组转为字符串String类型— join()方法

Dear 丶 2023-09-26 11:33 47阅读 0赞

## **目录** ##

一. 问题描述：

二. 问题总结：

三、问题解决

--------------------

## 一. 问题描述： ##

> vue前端采用element-ui组件 **Cascader 级联选择器**进行城市级联时，得到的是**一个数组；而后端要求是字符串类型。**

![429c6bdc62d04a508221926be0aa0337.png][]

![0ed3ba6090274922ac2db2958e10b0a7.png][]

## 二. 问题总结： ##

> **前端向后端****传值****时，将数组转为字符串string类型。**

## 三、问题解决 ##

> **join()方法可以将数组以某种[分隔符][Link 1]组合成字符串**
> 
> 例子：
> 
> arr=｛"ee","ff","gg"｝;
> 
> **str=arr.join(",") ;**  //通过空格将数组组合成[字符串][Link 2] 输出结果为**ee,ff,gg**

//处理所选城市数据【数组转字符串】 [1,2,3] --> 1,2,3
    //student.cityIds 是学生表中所在城市字段
    //第一个cityIds 是后端要的String类型字段
    //第二个cityIds 是前端得到的String数组
    //通过 join(',') 进行转换，中间用 ， 号隔开
    
    this.student.cityIds = this.student.cityIds.join(',')

![1abd113b34204e0489b2d71e2f09595f.png][]

数组转字符串，转换成功；在通过ajax传值给后端。

> #### 各位CSDN的友友们，要是还要其他方法实现，欢迎联系分享噢！**不同的方法不同的思路，值得学习，多多益善。** ####

[429c6bdc62d04a508221926be0aa0337.png]: https://img-blog.csdnimg.cn/429c6bdc62d04a508221926be0aa0337.png
[0ed3ba6090274922ac2db2958e10b0a7.png]: https://img-blog.csdnimg.cn/0ed3ba6090274922ac2db2958e10b0a7.png
[Link 1]: https://so.csdn.net/so/search?q=%E5%88%86%E9%9A%94%E7%AC%A6&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E4%B8%B2&spm=1001.2101.3001.7020
[1abd113b34204e0489b2d71e2f09595f.png]: https://img-blog.csdnimg.cn/1abd113b34204e0489b2d71e2f09595f.png