网络编程 
首页 > 网络编程 > 浏览文章

vue.js给动态绑定的radio列表做批量编辑的方法

(编辑:jimmy 日期: 2024/11/19 浏览:3 次 )

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列表做批量编辑的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:vue+element实现批量删除功能的示例
下一篇:React 组件转 Vue 组件的命令写法
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?