Vue中回显数据传入表单中无法修改

最新推荐文章于 2024-06-17 10:36:49 发布
最新推荐文章于 2024-06-17 10:36:49 发布
阅读量4.7k 收藏 7
点赞数 5
分类专栏： Vue 文章标签： vue 数据回显
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43642812/article/details/89203712
版权
通过axios请求后台获取了对象，存入了ruleForm中，在页面中通过键获取了值

在这里插入图片描述

<!--通过element组件实现，这是整个表单的一部分-->
<el-form-item>
	<el-input v-model="ruleForm.fee"></el-input>
</el-form-item>
但是发现前台操作时没有办法进行修改，或者是出现了一些奇怪的修改结果，通过请教得知，这中这种问题是JS导致的，处理方法为下
  • 将对象转化为字符串
  • 再将字符串转化为JSON对象

也就是说要先将ruleForm进行两次处理， 但是代码非常简单，具体如下

_this.ruleForm = JSON.parse(JSON.stringify(_this.ruleForm));

对于其他代码无需修改

现充爆破师
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue表单回显数据无法修改的问题
Crazy_GirlLL的博客
09-23 3585
前言：今天在做修改操作的时候遇到了一个问题，数据回显到修改表单之后，发现无法输入，也不能实现修改 项目环境：springboot+vue前后端分离 问题：修改操作数据回显无法输入值 一、问题截图 二、代码展示 编辑按钮 <el-button type="text" size="small" @click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑 点击编辑按钮后.
关于Vue3使用element-plus表单组件无法修改的问题
m0_74037817的博客
05-18 474
可能是我的理解不太行吧。
【Vue3】准备弹层表单【编辑回显，表单提交】
最新发布
qq_39921135的博客
06-17 608
这里一定要注意，el-form绑定的是:model，el-dialog绑定的是v-model。如果觉得label的宽度不够，可以通过label-width设置。加上校验后，label的前面就会有 * 号。
使用vue框架，数据回显之后不能编辑删除的问题
m0_71843547的博客
01-01 525
在vue实例创建时，obj.b并未声明，因此就没有被vue转换为响应式属性，从而不会触发视图的更新。$set()方法相当于手动的把obj.b处理成为一个响应式的属性，此时视图也会跟着改变了。在编辑操作中，把数据回显完之后，输入框实现了数据回显，但是不能删除修改输入框的值。
Vue数据回显表单无法编辑
qq_57528681的博客
07-06 1713
Vue数据回显表单无法编辑
element-ui输入框数据回显时无法编辑
正一品程序员的博客
11-01 1540
解决方法1：使用this.$set() data(){ return{ companyForm:{ detailedAddress:"" }, editValue:"编辑的值" } }, methods:{ handleEdit(){ this.$set( this.companyForm,//要修改的对象或数组 'detailedAddress',//要修改的具体值 thi
vue v-for 生成的input不能编辑修改_Vue面试高频考题解析
weixin_39647458的博客
11-21 614
如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。我们看到很多招聘上都写着掌握vue开发项目，那么面试都会问什么呢？别急，下面是我给大家整理了一份比较全面的Vue面试高频考题解析小册，看完一定收获满满。1. 对于MVVM的理解...
vue循环后不能下滑_Vue 循环后的数据更改无法响应。
weixin_32687311的博客
01-13 241
数组循环渲染到视图上，点击dom 改变数组中的一个布尔值来更新 该dom的class。发现数据变了，但相应的class 并没有根据改变后的布尔值去渲染。原始数据是created 里面获取的，赋给了一个needItemshow() 里面将 点中的item 传入 showArr；showArr 再渲染另一个dom ，该dom 下面的每项都可以通过点击来切换 class。 是通过show() 里面刚加的...
Vue——解决Vue获取服务器上数据后无法更改v-for循环标签的行内样式（六）
xiaonuolen
05-30 751
前端我从后台获取数据后更改了data里的属性没有翻译，打印了值确实是修改的但是没有显示出来，添加了updated()方法发现根本没有执行过，因此得出页面压根没有重新去渲染 div代码： <div v-bind:id="count" class="my_data" v-bind:style="{backgroundColor:color1[count]}" ></div&gt...
vue中循环不改变bug
weixin_30500663的博客
06-21 143
1.原因，本来要处理的这个数组，对象已经赋给vue的datas里面，这时候，push进去都是同一个数，此时，不管怎么循环改变，都是最后一个数组的改变的数。 2.解决方案，push进去的数必须是不是datas里面的。 转载于:https://www.cnblogs.com/cainiao-vcu/p/9209999.html...
element ui table编辑回显数据无法再在修改，input失效
m0_59547707的博客
04-10 730
table编辑回显数据无法再在修改
Vue form绑定数据后只能显示不能编辑
爱洗澡的拉布拉多的博客
07-03 2149
问题描述： 数据绑定后form上，数据能够正常显示，像单选、下拉框等能操作，但是操作后，显示的值不变，页面自动更新后才能显示。 原因分析： 是因为在赋值的时候，没有在data中声明属性，如下面的代码： <script> export default { data () { return { formModel: {} } }, methods: { processFormData (val) { let s = JSON.parse(J
Vue里如何解决form吧表单更新操作出现不能进行编辑的情况
qq_41497443的博客
08-31 3106
Vue里如何解决form吧表单更新操作出现不能进行编辑的情况 只需在进行form表单更新操作的时候进行强制更新即可： 1、首先、定义一个用于强制更新的方法 //对form表单进行强制更新操作，避免无法编辑表单的情况 updateForce(e){ this.$forceUpdate(); var val = e; } 2、在需要进行更新操作的form表单调用定义好的强制更新方法 <el-form-item label="线路编号" :label-width="
vue中解决表单只能显示不能编辑的问题
weixin_44447154的博客
06-11 6670
原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 解决方法:要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新. 使用方式: this.set(this.data,”key”,value’)...
element的el-form表单数据绑定或者回显后无法编辑修改
Schaffer的博客
05-10 3592
在赋值后加上如下代码： this.formData = JSON.parse(JSON.stringify(this.formData)); this.formData = JSON.parse(JSON.stringify(this.formData));
element的el-form表单数据赋值回显后无法编辑修改
weixin_40765227的博客
04-17 1753
写完之后表单无法修改，怎么点击都没反应。使用$set赋值即可。
使用vue框架，数据回显之后，输入框不能编辑的问题
XiaoSen125_的博客
12-19 698
在编辑的数据回显操作中，把数据回显完之后，发现input输入框虽然数据回显了，但是不能进行修改、删除等操作。对象会递归遍历data中定义的所有变量，所以如果没定义就监听不到变化。由于 Javascript的限制，vue不能检测数组和对象的变化。原理：Object.defindProperty。
vue el-date-picker 日期回显后无法改变
m0_58565372的博客
04-10 1723
场景描述：点击修改，数据回显渲染，后端返回我的是startTime和endTime，我需要将其处理，放到一个数组里面，并将其赋值。这样写，就会出现问题，数据回显成功之后，无法改变，如下图。以上就能实现，如下图。
关于vue绑定input的值对象，在方法中赋值无法修改的问题
小涛的博客
03-13 3506
<a-form layout="vertical"> <a-row :gutter="16"> <a-col :span="24"> <a-form-item label="名称"> <a-input v-model="helloForm.name" placeho...
【vue】element form/input/select 组件 赋值后无法编辑的问题
Hypnotic0624的博客
12-08 2370
今天在使用element form组件时，想创建一个修改的dialog ，赋上当前值再修改传后台 开始代码如下 HTML部分： <el-dialog :visible.sync="updateDialogVisible" title="编辑任务" width="50%"> <el-form :model="updateForm" ref="updateForm"> <el-row> <el-form-item lab
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值