Vue 修改数据的时候，表单值回显不正确

Vue表单值回显问题及解决

最新推荐文章于 2024-06-17 10:36:49 发布

原创最新推荐文章于 2024-06-17 10:36:49 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

在Vue中遇到修改数据时表单显示错误，总是显示第一次修改的值，可能的原因是prop绑定不当。解决方案包括检查数据绑定的正确性和使用forceUpdate强制更新视图。

如果在修改数据的时候，发现表单的值回显不正确，每次修改，都是第一次修改的值，这个可能是您的
代码有问题。

如果出现上面的问题，请检查
(1)prop的数据是否绑定正确

<el-col :span="24">
  <el-form-item label="图标" prop="icon">
    <e-icon-picker v-model="stform.icon" />
  </el-form-item>
</el-col>

(2) 实在不行 forceUpdate一次

this.$forceUpdate();

如果有帮助到您, 麻烦给个赞!!!

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MarkCoder

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

第五十六：vue3 数据回显

小画家

03-05

152

【代码】第五十六：vue3 数据回显。

vue3 reactive 数据回显问题

qq_38210427的博客

06-13

676

vue3 reactive 数据回显问题 - 简书

参与评论您还未登录，请先登录后发表或查看评论

在360浏览器中打开表单，回显错误数据

weixin_30235225的博客

05-05

258

同一条数据，在不同的浏览器上点击编辑，表单中显示的不一样，360会把原来记住的账号密码给显示到上面，谷歌不存在这个问题，一开始考虑让用户都使用谷歌，但是后来发现，这有点不现实，我不可能告诉每个客户让他使用谷歌浏览器，今天解决了该问题，分享下： 360显示效果（admin和密码都是之前测试的账号）：谷歌显示效果：解决方案：在input标签中添加以下属性： “ ...

vue改变form表单但不回显

jiajiaanna的博客

07-07

1014

当我们选择一个下拉框，其他的下拉框也需要根据选择的内容进行变化时，不回显的问题。

Object.assign + el-form 出现编辑时无法回显的问题，且validate无法触发的问题

树上骑个猴的博客

07-05

914

场景编辑的时候发现个别字段回显失败，使用@change="$forceUpdate()"来强制回显，但是又出现了新问题，编辑时给el-select选定了值，但是validate提示未选择。validate新增时却是正常的。于是发现是Object.assign的问题。后台返回数据为row，通过Object.assign进行拷贝 this.ruleForm = Object.assign({},row) //this.ruleForm为表单数据，row为后台返回的数据信息原因通过Object.a

vue修改表单数据不回显

shanshan128ou的博客

12-10

3921

不回显代码如下： data(){ return{ form: {}, } } handleUpdate(row) { this.reset(); const userId = row.userId || this.ids; getUser(userId).then(response => { this.form = response.data; this.postOptions = response.posts;

vue3 在弹窗中使用el-form表单编辑回显问题

Salange1的博客

08-04

8707

问题描述在使用el-dialog嵌套el-form是，点击添加数据没有问题，点击修改数据时，el-form回显不出来。 html代码 <el-dialog :title="form.id?'修改材料':'新增材料'" v-model="show" width="50%" :before-close="handleClose"> <el-form ref="form" :model="form" label-width="80px"> <el-form-it

antd form表单数据回显操作

01-22

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...

vue组件表单数据回显验证及提交的实例代码

12-29

最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。代码如下： <!--header-bar> 住户名称: <input type=text value=username v-model=...

Vue3关于reactive数据未回显的问题

m0_47195133的博客

05-07

3584

Vue3关于reactive数据未回显的问题

vue3 form表单新增，表单修改，删除，表单数据回显

qq_42704945的博客

07-27

8525

vue3封装弹窗组件，数据回显，封装组件的流程，第一理解具体的业务需求。想好数据的交互层级，数据进数据出的具体逻辑。vue的组件封装记住一点不要在子组件修改父组件的数据，需要修改数据emit方法抛出数据父组件修改。。

antd-vue对表单进行编辑，上传的文件没有回显解决方法

木木木不哭的博客

03-30

1500

antd-vue对表单进行编辑，文件没有回显解决方法

关于antdesign of vue Form表单中自定义组件（数据字典）的实现以及值不能回显的问题

weixin_42300551的博客

01-15

4632

本人是后端开发工程师，但最近几个项目用到了微服务加前后端分离的技术，于是接触学习了vue.js。对于前端开发只能算是了解+可以应用，vue高级复杂的用法也不是很了解，所以有说的不准确的地方，还希望大家多多指点。之前项目前端工程是采用Vue+Element的框架，当前项目框架是Vue+Ant Design。最近发现Element 和 antdesign这两个组件库还是存在一些细微区别的。...

【Vue3】准备弹层表单【编辑回显，表单提交】

最新发布

qq_39921135的博客

06-17

1110

这里一定要注意，el-form绑定的是:model，el-dialog绑定的是v-model。如果觉得label的宽度不够，可以通过label-width设置。加上校验后，label的前面就会有 * 号。

vue3+elementplus+ts dialogform 表单添加，编辑回显

qq_29091239的博客

02-01

5658

废话不多说上代码 /* eslint-disable prefer-const */ <template> <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :title="formObj.userId ? '编辑': '新增'" width="1000px" > <el-for

element组件form表单输入框输入内容不回显

你怎么也喜欢嘴巴嘟嘟

03-31

3528

果然 vue3 还是有很多问题使用一个element-plus 还是有很多问题比如我刚遇到的输入到表单无法回显问题暂时无解，可能还是不如了解，但是使用了强刷新只有数据是回显了暂时还没遇到问题 <el-form :model="UserObj" :rules="rules" ref="UserObj" label-width="80px" status-icon

vue 点击上数据上一条_vue从列表中选择一条数据，如何做到每次点击修改弹框都显示数据的本值，而不是上次编辑后没保存的值...

weixin_39667509的博客

12-19

1329

父组件将列表中选中的这个object给弹窗组件传进去；弹窗组件内代码：js:props:['object','visible'],computed:{objectProp(){returnObject.assign({},this.object)}},html:el-inputv-model=objectProp.name只要我在外面不对选中的数据进行切换，每次我打开这个弹...

vue3数据回显与双向绑定

qq_43750656的博客

02-08

2809

vue3版本中是实现数据绑定为通过新的ref与reactive函数实现 <template> <div> <a-button type="primary" @click="getData"> 点击查询下一个 </a-button> <br /> <a-button type="primary" @click="print"> 打印表单数据 </a-button> <a-form-m

Form表单中radio，option不回显问题

weixin_45540182的博客

11-04

642

value="0"是Vue中的一种简写，它相当于v-bind:value=“0”，它的作用是将一个属性的值绑定到一个表达式上，这里的表达式是0，也就是一个数字。属性是直接设置为一个字符串的。Vue中有很多这样的简写，它们可以让我们的代码更简洁，更易读。v-slot可以简写为#，它用于绑定插槽的名称。数据类型不匹配，例如"1"与1是无法匹配绑定的。v-bind可以简写为:，它用于绑定属性的值。v-on可以简写为@，它用于绑定事件的监听器。属性是绑定到一个数字上的，后者的。这两个代码的区别是，前者的。

Vue表单验证与数据回显技巧解析

资源摘要信息:"Vue表单验证.zip文件主要涉及Vue框架中使用iview组件库进行表单验证和数据回显的相关内容。文件中不仅包含了表单验证的实践操作，还涉及了如何利用iview组件实现Select选择器的单选验证，以及如何在...