vue双向绑定的时候把遍历的数组转为了字符串,并且再转回去数组进行绑定
2023-09-14 09:07:44 时间
我的问题大家可能不太懂,我详细再解释一下,就是我通过遍历一个大的数组,多层遍历之后,最后的值还是一个小的数组,形如:
aaa:[ { bbb1:[ "111",""222" ] } , { bbb2:[ "111",""222" ] } ]
我想把bbb下的数组变成以逗号或者竖线分割的字符串放在iview中input中,我的代码如下:
<div v-else-if="kv.type==='array'"> <Input v-model="kv.value.join('|')" placeholder="请输入值" @on-change="inVal($event,idx,i,number,index)"/> </div>
这里kv.value就是一个数组,是经过若干层遍历的最后一层,我通过直接在v-model中加了join方法,把数组变成了我想要展示的样子,但是再次在Input框输入值却始终得到的都是空了,经过几番思考,通过给Input加了@on-change方法,获取到当前的值,并且传入当前所在的数组的index,从而直接把整个数组中的这个值改变,从而实现。代码如下:
//以下是methods的一个方法: inVal(event,valIndex,itemIndex,condIndex,groupIndex){ let inValue=this.objDeepCopy(event.target.value.split("|")) this.settingList[groupIndex]['condition'][condIndex]['value'][itemIndex]['value'][valIndex]['value']=inValue; },
相关文章
- 关于个人开源项目(vue app)的一些总结
- VUE - 配置跨域
- 在Vue使用NProgress加载进度条
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- 富文本框vue-quill-editor的使用
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- vue-cli是什么?和 webpack是什么关系?
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- Vue compile - Vue中的双大括号 {{ 是如何被解析(parse)的
- vue+echarts实现动态绘制图表及异步加载数据的方法
- Vue——mixin混入
- 206:vue+openlayers 圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域
- 160:vue+openlayers 地图上添加Echarts柱状图
- 087:vue+openlayers 地图中某位置闪烁点动画 (示例代码)
- 075:vue+openlayers: Drag-and-Drop拖拽文件解析显示图形(代码示例)
- vue中Axios的封装和API接口的管理
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(五)会员管理