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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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将数据导入到Foxmail
2006/10/09 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
js实现日历
2020/11/07 Javascript
Python max内置函数详细介绍
2016/11/17 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
质检员岗位职责
2013/12/17 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
学雷锋月活动总结
2014/04/25 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
小学德育工作总结2015
2015/05/12 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
浅谈如何保证Mysql主从一致
2022/03/13 MySQL