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 相关文章推荐
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
JS中操作JSON总结
Dec 06 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
详解React 条件渲染
Jul 08 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
原生js实现日期联动
2015/01/12 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python探索之SocketServer详解
2017/10/28 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Shell编程面试题
2016/05/29 面试题
材料工程专业毕业生求职信
2014/03/04 职场文书
cf战队收人口号
2014/06/21 职场文书
2014年材料员工作总结
2014/11/19 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
遗嘱格式范本
2015/08/07 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python