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