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实现身份证号码验证的简单实例
Feb 19 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
JQuery球队选择实例
May 18 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js表头排序实现方法
2015/01/16 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
详解Python做一个名片管理系统
2019/03/14 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Python 从attribute到property详解
2020/03/05 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python中Selenium模块的使用详解
2020/10/09 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
《金子》教学反思
2014/04/13 职场文书
和睦家庭事迹
2014/05/14 职场文书
七夕情人节促销方案
2014/06/07 职场文书
商务考察邀请函模板
2015/02/02 职场文书
社区重阳节活动总结
2015/03/24 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS