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
Mar 07 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
七个很有意思的PHP函数
May 12 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 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+ajax实现图片文件上传功能实例
2014/06/17 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
市场营销专业求职信
2014/06/17 职场文书
租房协议书
2014/09/12 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript