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

ca88 1

ca88 2

每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中:

上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除。

vm.options.push({ id: "", text: "新选项", checked: false }); 

ca88,视图代码 view:

现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器.

"<ul><li v-for='option in options'>" + 
 "<input type='radio' :name='groupName'>{{option.text}}" + 
"</li></ul>", 

textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下:

数据绑定model.options:

var contents = $("#optionsArea").val().split("\n"); 
options: [{ id: 1, text: '选项1', checked: false }, { id: 2, text: '选项2', checked: false }] 

获取到数组,他只是个文本数组,我们动态绑定的radio列表却是一个个json对象,所以再把文本数组转成vue绑定一致的格式:

动态添加:

先清空数组:

vm.options.push({ id: "", text: "新选项", checked: false }); 

发表评论

电子邮件地址不会被公开。 必填项已用*标注