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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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递归使用示例(php递归函数)
2014/02/14 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python实现登录与注册系统
2020/11/30 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
校班主任推荐信范文
2013/12/03 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
北京大学自荐信范文
2014/01/28 职场文书
高级编程求职信模板
2014/02/16 职场文书
家长通知书家长评语
2014/04/17 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
医学专业自荐信
2014/06/14 职场文书
离职感谢信怎么写
2015/01/22 职场文书
介绍信样本
2015/01/31 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015年成本会计工作总结
2015/10/14 职场文书