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 生成指定范围数值随机数
Jan 09 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Promise静态四兄弟实现示例详解
Jul 07 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python备份Mysql脚本
2008/08/11 Python
python回调函数的使用方法
2014/01/23 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python 2.7.14安装图文教程
2018/04/08 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python datetime 如何处理时区信息
2020/09/02 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Java程序员面试题
2016/09/27 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
高二学生评语大全
2014/04/25 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
离婚上诉状范文
2015/05/23 职场文书
新闻稿件写作范文
2015/07/18 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript
Go语言编译原理之变量捕获
2022/08/05 Golang