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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 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实现与ASP Banner组件相似的类
2006/10/09 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
jquery实现加载等待效果示例
2013/09/25 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Python中的作用域规则详解
2015/01/30 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python 并发下载器实现方法示例
2019/11/22 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
个人对照检查材料
2014/02/12 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
《西门豹》教学反思
2016/02/23 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android