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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JQuery for与each性能比较分析
May 14 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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实现用户在线时间统计详解
2011/10/08 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
初识javascript 文档碎片
2010/07/13 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
详解python 注释、变量、类型
2018/08/10 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python解析xml简单示例
2019/06/21 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Numpy数组的广播机制的实现
2020/11/03 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
三八节标语
2014/06/27 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2015年科普工作总结
2015/07/23 职场文书
感谢师恩主题班会
2015/08/17 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS