vue.js删除动态绑定的radio的指定项
更新时间：2017年06月02日 10:06:45 作者：Coding_xiaoqiu
这篇文章主要介绍了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的指定项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下2018-09-09
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,Pinia的成功可以归功于他管理存储数据的独特功,下面这篇文章主要给大家介绍了关于Vue3中pinia使用方法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue2.0学习系列之项目上线的方法步骤(图文)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中四种操作dom方法，首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用2023-02-02
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2020-01-01
本文主要介绍了vue前端RSA加密java后端解密的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
这篇文章主要介绍了vue 解决provide和inject响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
小编最近接了这样一个需求，需要在element表格操作一栏添加提示功能，下面小编给大家带来了基于vue实现element表格里表头信息提示功能，需要的朋友参考下吧2019-11-11
最新评论