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 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python基于requests库爬取网站信息
2020/03/02 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
工地资料员岗位职责
2013/12/31 职场文书
工作目标责任书
2014/07/23 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技