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

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

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

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  3. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  4. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  5. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  6. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  7. Vue双向绑定的实现原理系列(四):补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  8. Vue双向绑定的实现原理系列(一):Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  9. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

随机推荐

  1. (转自知乎)Unicode编码

    很多人都把Unicode编码挂在嘴边,其实咱们现实生活中遇到的编码基本都是Unicode的 因为Unicode兼容了大多数老版本的编码规范例如 ASCII Unicode编码定义了这个世界上几乎所有字 ...

  2. BZOJ5177 : [Jsoi2013]贪心的导游

    首先预处理出对于每个模数,所有被模数按结果从大到小排序的结果,那么对于一个询问,如果可以在$O(1)$时间内判断某个数字是否出现,则可以$O(1000)$回答. 考虑对序列进行分治,对于区间$[l,r ...

  3. mysql时间加减运算

    一.MySQL 获得当前日期时间 函数 1.1 获得当前日期 + 时间(date + time) 函数:now() mysql> select now();+———————+| now() |+ ...

  4. python系统编程(六)

    threading注意点 1. 线程执行代码的封装 通过上一小节,能够看出,通过使用threading模块能完成多任务的程序开发,为了让每个线程的封装性更完美,所以使用threading模块时,往往会 ...

  5. Java 消除过期的对象引用

    内存泄漏的第一个常见来源是存在过期引用. import java.util.Arrays; import java.util.EmptyStackException; public class Sta ...

  6. 列表去重几种方法 python

    1.方法一: >>> a=[1,1,2,2,3,3] >>> b=[] >>> for i in a: ...     if i not in b ...

  7. python之列表和生成器表达式篇

    一.协程函数的应用 写一个装饰器用于让协程函数不需要输入再执行一次next()函数 分析: 在装饰器中生成该协程函数的生成器, 并且执行一次next()函数 def firstNext(func): ...

  8. Vue(一)创建第一个Vue程序

    一.下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry= ...

  9. xhprof查看性能测试图一直报错:failed to execute cmd: " dot -Tpng"多种因素解决方案

    xhprof查看性能测试图一直报错:failed to execute cmd: ” dot -Tpng”多种因素解决方案最近在新环境进行php代码性能测试,用了xhprof这个工具,搭建好以后,点击 ...

  10. iOS - 统计代码行数

    终端 -> 进入文件夹 查看每一行的行数 find . -name "*.m" -or -name "*.h" -or -name "*.xib ...