把接口里的字符串转化为数组vue-shop商品分类

已于 2022-09-02 17:52:52 修改
阅读量466 收藏
点赞数
分类专栏： vue 文章标签： vue
于 2022-08-15 11:37:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57607714/article/details/126316943
版权

 此时接口返回给我们的是字符串 

 

运行之后的效果是这样 超长 并不美观 

所以需要拆分开

 要用这个element组件里这个多选框组 需要用数组的形式

 

 

 好的 开始转化数组 

  1.  先使用forEach循环出每个item项
  2. 使用split分割 这里应该分割的是空字符串(' ')  但是我为了看分割逗号的区别 改了逗号 区别就是 分割谁 就是把谁去掉
  3. 分割之后 赋值给原来的接口里的item.attr_vals 这个attr_vals是接口里返回给前端的 所以我们只是把res数据改了 可以在forEach下面在打印res 就会发现已经转变为数组了

 

  

 

 4.再细致一点 

如果长度为0  也就是说没有数据 返回空数组 如果有数据 就是上面写的分割数组

然后再把这个三元表达式 赋值给item.attr_vals 

实现效果：

爬楼梯的小新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 获取url参数、get参数返回数组的操作
01-18
这是vue过滤器 获取url参数，返回数组 Vue.prototype.$url=function(){ var url = decodeURIComponent(location.search); //获取url中?符后的字串 var theRequest = new Object(); if (url.indexOf(?) != -1) { var str = url.substr(1); strs = str.split(&); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].sp
将接口中返回的字符串转为数组
逆风优雅的博客
03-10 1249
原数据结构： 对数据进行修改： getSegments().then((res) => { console.log(res.payload); // 遍历 let formArr = [] res.payload.forEach((item) => { if (item.segmentValue) { let Valuearr = item.segmentValue...
vue上传文件后拿取接口中的值拼接成数组
xiaoxuera的博客
04-22 1877
vue上传文件后拿取接口中的值拼接成数组
小程序接口数据是字符串数组的通过循环转数组在遍历
weixin_45334111的博客
11-04 1170
小程序接口数据是字符串数组的通过循环改变返回的数据类型再进行遍历转换后数据 代码 wx.request({ url: app.globalData.api + `/orders/orderList?page=${page}&size=${pages}`, header: { 'Content-Type': 'application/json;charset=utf-8', 'token': token }, method: 'POST',
字符串转换成字符数组的一些方法
AIpoem的博客
07-12 7232
1. split() 2. 扩展运算符 3. 字符串的解构赋值 4. Array.from
VUE-shop商城源码
05-17
在Vue-shop中，它可能被用于实现不同页面（如商品详情、分类页面、个人中心等）之间的平滑跳转。 4. ** Axios网络请求**：Vue-shop可能使用Axios库进行HTTP请求，获取服务器端的数据，如商品信息、用户信息、订单...
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中将html字符串转换成html后遇到的问题小结
10-17
在Vue.js开发中，有时需要将后端返回的HTML字符串渲染到页面上。Vue提供了`v-html`指令来实现这一功能，但在这个过程中可能会遇到一些问题。本文将详细讲解两个关键问题及其解决方案。 首先，当使用`v-html`将HTML...
VUE 截取字符串的方法
07-30
适合刚刚进入(JavaScript，Vue)编程领域的小白使用
对接口中的数据进行处理，重组成新数组
大把小米的博客
05-19 882
项目中经常需要将接口中的数据进行处理，得到自己想要的格式。 下面是将接口中的数据重组成一个新数组的方法 接口数据： 普通方法 // 新数组,用来装数据 var newArr = []; //通过map方法将原始数组中的每一项循环 res.list.map(function(item,index){ //新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值 var sevm = {}; //给每一项中的参数初始化并赋值 arr['t
vuerouter带参数为数组，数组字符串与数字的转换
伊人笑桃花酒的博客
08-02 3079
- 问题： 通过vue-router，实现从页面B跳转页面A，页面A默认展示选择B带过来的参数所查询到的结果列表 - 涉及： - 数组字符串与数字的转换 - elementUI的Select选择器，options选项的value值为全等比较，若原有value值类型为数字而传入的是字符串，不会做转换，故value类型需确定好，防止出现问题 - 源代码-页面A： //...
接口返回双对象字符串，添加至数组里（JSON.parse）
yuanxinwyc的博客
12-17 605
1，接口返回数据如下，一个字符串包裹两个对象，将字符添加到数组里，实现数据回填 2，如果这时直接用push直接添加到数组里数据格式会是如下，数组里一个字符串包裹两个对象 3，利用JSON.parse将字符串转为对象，然后赋值给该数组，注* 他是一个字符出串中有两个对象的内容，所以要拼接[ ]，如下图 4，然后就可以打印出来返回的数据格式 （新手学习中遇到的问题，拼接 [ ]这块不知道是不是需要这么理解，） ...
vue 请求参数数组_浅谈vue中get请求解决传输数据是数组格式的问题
weixin_29535577的博客
01-17 1310
qs的stringify接收2个参数，第一个参数是需要序列化的对象，第二个参数是转化格式,一般默认格式是给出明确的索引，如：arr[0]=1&arr[1]=2//indices是index的复数格式，因此indices是索引的意思//bracket是括号的意思，因此arrayFormat:'brackets'代表数组下标为空[]qs.stringify({ arr: [1,2,3] }, ...
vue中forEach与splice连用删除元素出现的bug
weixin_35757191的博客
02-13 582
在使用 Vue 中的 forEach 和 splice 连用删除元素时，可能会出现 bug。这是因为 forEach 是遍历数组的方法，而 splice 是对数组进行修改的方法，因此，当使用 splice 删除数组中的元素时，它会改变数组的长度，进而影响到 forEach 的遍历。因此，在使用 forEach 和 splice 连用删除元素时，需要注意以下几点： 不能在 forEach 内部直接...
vue 字符串、数组之间的相互转换
chengchong_cc的博客
03-29 236
参考网址：https://blog.csdn.net/m0_58352785/article/details/125301352
vue修改计算属性的值_「vue干货1」循环，计算属性，事件处理器
weixin_39768917的博客
11-21 478
Vue干货第一集:v-for 循环v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表： 循环 {{value}} ...
vue使用split()将字符串分割数组join()将数组转字符串reverse()将数组反转
weixin_43749805的博客
03-17 8147
3.split(’ ')将字符串按空格才分成数组，这个用的比较多的如","将字符串根据逗号切割成数组。拆分后：[‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’]separator ：可选参数。用于拆分的字符串或正则表达式。1.split()不传参数默认整个字符串作为数组的一个元素，返回包含原始字符串的数组。2.split(‘’)单引号不传参数默认将字符串拆分成一个个字符数组。2.join(‘*’)按指定字符将数组分割成字符串。1.join()不传默认按，分割数组。
vue post请求在url地址后面拼接id+一个数组
花椒和蕊的博客
10-11 5858
上周遇到一个稍稍不同于平时封装接口的流程，后端给我的接口是post请求，要求我在地址后面拼接id和一个数组。数组没有key，只有值。 第一次遇到，有点奇怪，但是好在解决了。 首先是封装接口 /** * 1/根据用户配置id更新数据 * @param parameter * @returns {AxiosPromise} */ export function UpdateuserIdMessages(params, data) { return axios({ url: xxx地
vue forEach循环数组拿到自己想要的数据
热门推荐
山外小楼
01-16 11万+
<el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> {{item.value
vue怎么把字符串转换为数组
最新发布
06-11
在 Vue.js 中，可以使用 JavaScript 的 `split` 函数将一个字符串转换为数组。该函数接收一个分隔符作为参数，并返回一个数组，数组的元素是字符串中使用分隔符分隔后的子字符串。 例如，如果想要将一个以逗号分隔...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值