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中的排序算法代码
Feb 22 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
js实现抽奖功能
Nov 24 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中计算时间差的几种方法
2009/12/31 PHP
PHP加密解密类实例分析
2015/04/20 PHP
php实现短信发送代码
2015/07/05 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
指针和引用有什么区别
2013/01/13 面试题
劳动之星获奖感言
2014/02/01 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
市场营销计划书
2015/01/17 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
MySQL存储过程及语法详解
2022/08/05 MySQL