vue双向绑定的时候把遍历的数组转为了字符串,并且再转回去数组进行绑定

时间:2023-08-20 23:06:58
vue双向绑定的时候把遍历的数组转为了字符串,并且再转回去数组进行绑定

我的问题大家可能不太懂,我详细再解释一下,就是我通过遍历一个大的数组,多层遍历之后,最后的值还是一个小的数组,形如:

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;
},

链接参考这里:https://segmentfault.com/q/1010000018995418

https://segmentfault.com/q/1010000018957711