在vue.js中如何给动态绑定的radio列表做批量编辑

下面我就为大家分享一篇vue.js给动态绑定的radio列表做批量编辑的方法,具有很好的参考价值,希望对大家有所帮助。

在vue.js中如何给动态绑定的radio列表做批量编辑

每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中:

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

登录后复制

现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器.

textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下:

立即学习“前端免费学习笔记(深入)”;

var contents = $("#optionsArea").val().split("");

登录后复制

获取到数组,他只是个文本数组,我们动态绑定的radio列表却是一个个json对象,所以再把文本数组转成vue绑定一致的格式:

先清空数组:

vm.options.length = 0;

登录后复制

再将文本数组映射成vue绑定需要的数据结构:

vm.options = contents.map(function (item, index, arr) {  return {  id: "",  text: item,  checked: false  } });

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中如何实现剪裁图片并上传服务器功能

如何解决easyui日期时间框ie的兼容的实际问题(详细教程)

详细为你讲解Immutable及 React 中实践技巧

以上就是在vue.js中如何给动态绑定的radio列表做批量编辑的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2750238.html

(0)
上一篇 2025年3月8日 05:33:19
下一篇 2025年3月8日 05:33:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用js获取当前时间

    这次给大家带来如何使用js获取当前时间,使用js获取当前时间的注意事项有哪些,下面就是实战案例,一起来看一下。 Date对象setDate() : 设置一个月的某一天。getFullYear() : 返回一个表示年的四位数字。getMont…

    编程技术 2025年3月8日
    000
  • jscss基础操作总结

    这次给大家带来jscss基础操作总结,jscss基础操作的注意事项有哪些,下面就是实战案例,一起来看一下。 返回上一页: 返回上一页function goBack(){window.history.go(-1) -2即为退后2页} 登录后复…

    编程技术 2025年3月8日
    200
  • 怎样编写可自定义维护JS代码

    这次给大家带来怎样编写可自定义维护js代码,编写可自定义维护js代码的注意事项有哪些,下面就是实战案例,一起来看一下。 1.1 格式化 关于缩进层次: 我不想挑起“Tab or Space”和“2 or 4 or 6 or 8 Space”…

    编程技术 2025年3月8日
    200
  • 在JavaScript中如何复制内容到剪贴板

    最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑,需要的朋友可以参考下 常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js原生方法:do…

    2025年3月8日
    200
  • 在angularjs数组中如何判断是否含有某个元素

    下面我就为大家分享一篇angularjs数组判断是否含有某个元素的实例,具有很好的参考价值,希望对大家有所帮助。 也就是in_array函数,判断数组中是否含有某个元素。   Array.prototype.in_array = funct…

    编程技术 2025年3月8日
    200
  • 关于JS抛出错误使用汇总

    这次给大家带来关于js抛出错误使用汇总,js抛出错误的注意事项有哪些,下面就是实战案例,一起来看一下。 在JS中抛出错误是一门艺术。摸清楚代码中哪里合适抛出错误是需要时间的。因此,一旦搞清楚了这一点,调试代码的事件将大大缩短,对代码的满意度…

    编程技术 2025年3月8日
    200
  • 在angular中如何使用json对象push到数组中的方法

    下面我就为大家分享一篇angular json对象push到数组中的方法,具有很好的参考价值,希望对大家有所帮助。 在项目中,api要求的数据格式为 $scope.data = { “name”:”zhangsan”, “Menus”: […

    编程技术 2025年3月8日
    200
  • JS的try-catch语句与错误类型使用

    这次给大家带来js的try-catch语句与错误类型使用,js的try-catch语句与错误类型使用注意事项有哪些,下面就是实战案例,一起来看一下。 应用程序逻辑总是知道调用某个特定函数的原因,因此也是最合适处理错误的。千万不要将try-c…

    编程技术 2025年3月8日
    200
  • 在angularjs中如何实现table增加tr的方法

    下面我就为大家分享一篇angularjs实现table增加tr的方法,具有很好的参考价值,希望对大家有所帮助。 需求: 上面是一个table,运用了 循环显示。现在的一个需求是:需要在每行添加一个字段,不过不能在同一行显示,需要在下一行显示…

    2025年3月8日
    200
  • 在angularJs中如何通过表格添加删除修改查询方法

    下面我就为大家分享一篇angularjs 表格添加删除修改查询方法,具有很好的参考价值,希望对大家有所帮助。 如下所示: nbsp;html>  Title   var app=angular.module(“mpp”,[]); ap…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论