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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
介绍一下如何优化MySql
2016/12/20 面试题
学校司机岗位职责
2013/11/14 职场文书
记者岗位职责
2014/01/06 职场文书
食堂个人先进事迹
2014/01/22 职场文书
幼儿园门卫制度
2014/01/29 职场文书
中学生个人自我评价
2014/02/06 职场文书
网络营销策划方案
2014/06/04 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2014年药房工作总结
2014/11/22 职场文书
家长学校教学计划
2015/01/19 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS