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 EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
php输出形式实例整理
2020/05/05 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python使用爬虫猜密码
2016/02/19 Python
python基于http下载视频或音频
2018/06/20 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
运行时异常与一般异常有何异同?
2014/01/05 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
争做文明公民倡议书
2014/08/29 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
网络管理员岗位职责
2015/02/12 职场文书
整改通知书
2015/04/20 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
你需要掌握的20个Python常用技巧
2022/02/28 Python
Python学习之迭代器详解
2022/04/01 Python