vue.js删除动态绑定的radio的指定项


Posted in Javascript onJune 02, 2017

vue.js删除动态绑定的radio的指定项

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

视图代码 view:

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

数据绑定model.options:

options: [{ id: 1, text: '选项1', checked: false }, { id: 2, text: '选项2', checked: false }]

动态添加:

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

动态删除指定radio,我们存储的是json对象动态添加到options数组中去,取的时候在每个事件可以传入$event对象,可以获取到当前事件源,DOM对象,但是vm.options是个数组,没法很好的匹配DOM来删除指定的数组项。
在我们循环绑定数据的时候一般是 v-for:"item in items" 忘了他还有一个index属性,当前元素的索引.

这里就简单了,我们在动态循环绑定操作radio数据的时候,把index加上

"<p v-for='(option,optionIndex) in options' @mouseenter='optionEnter($event,optionIndex)' >"

然后根据索引来删除options的指定选项,就容易了

vm.options.splice(optionIndex, 1);

以上所述是小编给大家介绍的vue.js删除动态绑定的radio的指定项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 #Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
Vue.js中数据绑定的语法教程
Jun 02 #Javascript
SpringMVC+bootstrap table实例详解
Jun 02 #Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
详解js异步文件加载器
2016/01/24 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
使用python统计文件行数示例分享
2014/02/21 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
wxPython学习之主框架实例
2014/09/28 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python版大富翁源代码分享
2018/11/19 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python编写单元测试代码实例
2020/09/10 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
超市中秋节促销方案
2014/03/21 职场文书
产假请假条
2014/04/10 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
毕业生求职信范文
2014/06/29 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
作风建设剖析材料
2014/10/06 职场文书
预备党员转正意见
2015/06/01 职场文书
红色电影观后感
2015/06/18 职场文书
思想工作总结范文
2015/08/12 职场文书