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的递归之递归与循环示例介绍
Aug 05 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Ionic快速安装教程
Jun 03 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
React + webpack 环境配置的方法步骤
Sep 07 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
php strcmp使用说明
2010/04/22 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python动态进度条的实现代码
2019/07/03 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python属性和内建属性实例解析
2020/01/14 Python
python 追踪except信息方式
2020/04/25 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
详解Python流程控制语句
2020/10/28 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
yy司仪主持词
2014/03/22 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
文明班级申报材料
2014/12/24 职场文书
男方婚礼答谢词
2015/01/20 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android