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 相关文章推荐
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
JS敏感词过滤代码
Dec 23 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
JavaScript 常用函数
2009/12/30 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
javaScript基础详解
2017/01/19 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Python OpenCV之常用滤波器使用详解
2022/04/07 Python