v-for循环input方法无法编辑_一个可视化json编辑组件的编写

最新推荐文章于 2024-05-24 21:21:01 发布
最新推荐文章于 2024-05-24 21:21:01 发布
阅读量459 收藏
点赞数
文章标签： v-for循环input方法无法编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39586235/article/details/111332182
版权

一个可视化json编辑组件的编写

背景

一个功能，需要用户自定义json，并上传到对应的接口中。想要有可视化的操作。

解决路线

  1. 直接用一个文本框，让用户把编写好的json输入。
    被否决了。因为本身就是为了方便用户，不能直接让他们编写好，这样体验很不好。
  2. 一个类似键值对的形式，用几个输入框拼凑成key-value的形式

工具

vue + elementui

完成的效果

保留让用户直接输入的功能，又能可视化编辑4a9ba3ad7d091e22c56217ace63b2c83.png

be5c92ce319e9651ddfa1e5fd9be185f.png
可视化

实现过程

输入框直接输入的不谈，讲下可视化输入的解决过程。

  1. 分析json格式有哪些要素。
    基本的有：值  键值 由键值对构成的对象 数组。在这里，还要考虑到实际的业务场景，是需要一开始就是对象的形式。我们用一棵树来表达我们需要的元素吧。一开始考虑少了数组这个因素，导致实现的不合要求QAQ

cfed9c5d38bde6d44a020ff863cd4073.png
2. 解决vue组件循环依赖。由分析可以得到这是一个递归结构，因此最容易实现的方法就是用递归去实现。但是vue组件不能简单地通过import来互相引用，但是vue提供了循环依赖的支持。详情请看链接。

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%

最低0.47元/天 解锁文章
weixin_39586235
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
json-editor:JSON数据可视化JSONEditor, 可视化界面编辑json数据内容
08-04
JSON数据可视化/JSONEditor，json可视化编辑能力的实现（以表单形式编辑json数据） 使用场景：提供可视化界面编辑json数据内容 技术栈：React/Mobx/Ant Design 特点： 弹性布局，提供大屏和小屏两种展示模式 支持...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
- 这里`index`是`v-for`循环中的迭代变量，确保每个元素都有一个唯一的ID。 3. **`jsMoney` 方法** - 在Vue中，`jsMoney`方法用于响应`input`元素的值变化。在示例中，它接收`index`参数，通过该参数可以确定是...
vue v-for 生成的input不能编辑修改_Vue面试高频考题解析
weixin_39647458的博客
11-21 602
如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。我们看到很多招聘上都写着掌握vue开发项目，那么面试都会问什么呢？别急，下面是我给大家整理了一份比较全面的Vue面试高频考题解析小册，看完一定收获满满。1. 对于MVVM的理解...
v-for循环标签（含有input）出现“复用“现象的解决办法
Yukinoshita_kino的博客
12-08 2016
项目中页面通过v-for循环展示时，出现所有循环子元素功能同步，标签"复用"情况的解决办法
vue通过for循环生成input框后双向绑定失效问题
最新发布
qq_44864879的博客
05-24 1097
有些时候页面上有太多的表单元素，一个个的写太过繁琐，拿 input 框举例，众多的 input 框，无非就是输入框前的说明和 input 框的 name 属性不一样</</</</</</</既然这样，何不弄一个数组，通过 for 循环遍历出来，岂不是更省事？经过一番尝试，终于成功，特此记录，便于后续回顾及帮助到有需要的人。
vue v-for通过index动态绑定input输入框的数据！vue中v-for出来的多个input，如何拿到每个input的值？vue为什么v-model绑定Object的时候不生效？
juvenile_的博客
04-10 2977
vue v-for通过index动态绑定input输入框的数据 vue为什么v-model绑定Object的时候不生效？ Vue动态添加v-model绑定及获取其返回数据 vue多个input绑定一个数组变量问题 vue中v-for出来的多个input，如何拿到每个input的值？ ...
Vue奇奇怪怪的小技巧
Crazymryan的博客
11-02 242
目录1.v-for 循环对象2.动态事件3.“双向绑定” .sync4.获取原始DOM事件5.小型状态管理仓库6.构造器 Vue.extend1.v-for 循环对象有时候我们接口所返回...
v-for循环的input框的求和问题
weixin_50810577的博客
11-07 1510
v-for循环的input框的求和问题 首先了解一下需求：在评分表里的每一项进行评分，并将每一项的评分及对应的具体内容放到一个对象中，并将这些对象放到一个数组中，在提交时发送给后台，同时前端页面也展示合计总分。 数据结构 /*这是每一个评分项的数据结构*/ postData:{ "activityId": 0, "anonJudgeId": "", "itemId": 0, "ju
基于vue v-for 循环复选框-默认勾选第一个的实现方法
12-29
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： <span v-for=(one,index)><input type=checkbox :...以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给
For-loop---index-input-array.rar_LabVIEW 数组_for循环
09-21
在LabVIEW中，For循环通常表现为一个带有三个端口的图标：初始化、迭代和终止条件。这三个端口分别用于设定循环的起始值、每次迭代时增加的步长以及停止循环的条件。在For循环内部，你可以放置需要重复执行的VI...
foo_input_sacd-0.5.11.zip_ dsd_FOO-INOUT-SACD_foo_input_sacd0._f
09-23
"FOO-INOUT-SACD"可能是这个软件的项目代号或者模块名称，"foo_input_sacd0._f"可能是该软件的一个特定组件或配置文件。 描述中的"SCD decoder to PCM format(wave)"说明了这个软件的主要功能，即它是一个SACD解码...
vue 设置 input 为不可以编辑的实现方法
10-16
今天小编就为大家分享一篇vue 设置 input 为不可以编辑的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app：v-for里获取input的值：@input方法
qq_44429079的博客
12-28 2404
v-for里获取input的值： <!-- 个人 --> <template> <view> <view class="person"> <view v-for="(item, index) in personMsg" :key="index"> <!-- 判断类型 --> <template v-if="item.type == 'position'">
文科生学python_文科生带你学Python|分支VS循环
weixin_39713686的博客
11-24 81
112019-07文科生带你学Python|分支VS循环分支&循环是程序结构控制的核心，不管学习哪种编程语言，程序的结构控制都是非常重要的。LEARN MORE图片来自网络，如侵删I——P——O上一节中，以1加到100为例讲了一下伪代码是什么。大家可能已经发现了，这种解决问题的方法和我们过去在处理这个问题的思路方法有着比较大的区别，你或许可以看懂上一节伪代码的讲解中用的办法，但是让你用类似的办法去...
Vue中使用v-for循环input失去焦点问题
Jensonhui's Blog
03-22 1952
Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）
vue v-for 渲染input 输入有问题 解决方案
weixin_30339457的博客
05-16 1785
v-for循环input标签的时候输入信息两个输入框一同显示输入信息 解决方案： <input :placeholder="items.title" v-model = "myinputdata[index]"> 使用v-model myinputdata声明一个数组就可以啦 转载于:https://www.cnblogs.com/baiyq/p/10875439.html...
vue v-for循环改变循环数据视图不更新
热门推荐
qq_27437073的博客
07-11 1万+
在前端开发中如下图菜单框架（左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] ）v-for循环menu显示左侧菜单 问题：点击顶部菜单后（menu[]重新赋值），左侧菜单不能更新为新的menu[]里的内容。 原因： 由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = ...
VUE的input框赋值后无法进行编辑
qq_42753983的博客
04-20 967
【代码】VUE的input框赋值后无法进行编辑。
Vue解决data数据改变时，v-for无法实现实时更新dom元素的问题(template中代码的局部刷新)
weixin_40745445的博客
04-24 7403
问题描述 利用Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示： <el-card class="content-card" v-for="(questionsData,i) in form.questionsData"> //具体的业务 ...... </el-card> 然而，v-for在设计过程中，无法实现对数据的双向绑定，也就
element-ui使用v-for循环el-form-item 写一个组件
03-31
以下是一个使用element-ui的v-for循环el-form-item的组件代码示例： ```vue <template> <el-form> <el-form-item v-for="(field, index) in fields" :key="index" :label="field.label"> <el-input v-model="field.value" :placeholder="field.placeholder"></el-input> </el-form-item> </el-form> </template> <script> export default { props: { fields: { type: Array, required: true, default: () => [], }, }, }; </script> ``` 在上述代码中，我们使用了一个props属性来接收一个名为fields的数组，该数组中包含了每个表单项的label、placeholder和value属性。我们使用v-for循环该数组，并将其作为el-form-item的子组件，每个el-form-item包含了一个el-input组件，用于输入表单项的值。最后，我们将整个表单包裹在一个el-form组件中。 使用该组件时，我们只需要传递一个包含所有表单项的数组即可： ```vue <template> <my-form :fields="fields"></my-form> </template> <script> import MyForm from "@/components/MyForm.vue"; export default { components: { MyForm, }, data() { return { fields: [ { label: "姓名", placeholder: "请输入姓名", value: "", }, { label: "邮箱", placeholder: "请输入邮箱", value: "", }, { label: "电话", placeholder: "请输入电话", value: "", }, ], }; }, }; </script> ``` 在上述代码中，我们引入了刚才创建的MyForm组件，并将fields数组传递给该组件的props属性。fields数组中包含了三个表单项，分别是姓名、邮箱和电话。我们可以通过该组件来快速创建包含多个表单项的表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值