vue.js给动态绑定的radio列表做批量编辑的方法


Posted in Javascript onFebruary 28, 2018

vue.js给动态绑定的radio列表做批量编辑的方法

每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中:

vm.options.push({ id: "", text: "新选项", checked: false });

现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器.

textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下:

var contents = $("#optionsArea").val().split("\n");

获取到数组,他只是个文本数组,我们动态绑定的radio列表却是一个个json对象,所以再把文本数组转成vue绑定一致的格式:

先清空数组:

vm.options.length = 0;

再将文本数组映射成vue绑定需要的数据结构:

vm.options = contents.map(function (item, index, arr) { 
 return { 
 id: "", 
 text: item, 
 checked: false 
 } 
});

以上这篇vue.js给动态绑定的radio列表做批量编辑的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 #Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
angular json对象push到数组中的方法
Feb 27 #Javascript
angularjs实现table增加tr的方法
Feb 27 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
php生成与读取excel文件
2016/10/14 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Spy++的使用方法及下载教程
2021/01/29 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
小学竞选班长演讲稿
2014/09/09 职场文书
党性分析材料格式
2014/12/19 职场文书
预备党员个人总结
2015/02/14 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
入党心得体会
2019/06/20 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python