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
vue双向绑定的时候把遍历的数组转为了字符串,并且再转回去数组进行绑定的更多相关文章
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- 梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
- Vue双向绑定实现原理demo
一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Vue双向绑定的实现原理系列(四):补充指令解析器compile
补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
随机推荐
- Nginx (LNMP+https)
单向认证与双向认证的概念 什么是单向认证 单项认证就是比如你有个密码用户名然后和服务器上的用户信息进行比对一致的话你们就可以建立连接. 什么是双向认证 SSL的双向认证就是客户端要获取服务端的证书,检 ...
- centos7下安装配置redis
1.1. Redis下载安装(linux) 1.1.1. 下载: 下载地址:https://redis.io/download 选择合适的版本下载,如下图: 1.1.2. 安装: (1)把下载好的re ...
- pygame 笔记-7 生命值/血条处理
通常游戏中的角色都有所谓的生命值,而且头顶上会有一个血条显示.生命值无非就是一个属性而已,很容易在Player.py类中增加,头顶上的血条其实就是绘制二个矩形,叠加在一起. 以上节的Player.py ...
- R12.2.4 ORA-01017: invalid username/password; logon denied
sqlplus / as sysdba ORA-01017: invalid username/password; logon denied [oracle@ebs 11.2.0]$ source / ...
- 替换空字符NULL(字符编码为0的字符)
老R3(非Unicode系统),发现读取出来的数据中有编码为0的字符,存文件后发现串行,所以需要先替换 DATA: str TYPE string. *str = zacct_12-txt+47. s ...
- pycharm 注册码/License server 2017年最新
两种方法: 1.选License server激活,输入:http://idea.imsxm.com 2.2017年激活码 时效1年BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUc ...
- shell符号解释
#符号详解 () 在子shell中运行 (a=1);echo $a,结果是空,因为a=1不是在当前shell中运行的(a=1);(echo $a)也是空的 小技巧:(cd $path, do some ...
- mac下安装xampp、及其之上的组件安装
由于mac下开发需要用到php7,这里是用的xampp集成开发版本.但是mac下安装xampp失败,失败信息如下: Error starting "XAMPP" stack: fa ...
- 【C++】C++中typedef、auto与decltype的作用
typedef 类型别名(type alias)是一个名字,使用typedef不会真正地创建一种新的数据类型,它只是已经存在数据类型的一个新名称.语法: typedef type name; 其中ty ...
- SQL DCL 数据控制语句
前言 DCL(Data Control Language)语句:数据控制语句,用于控制不同数据段直接的许可和访问级别的语句.这些语句定义了数据库.表.字段.用户的访问权限和安全级别.主要的语句关键字包 ...