element-ui 表单组件无效/不更新视图/无法输入

最新推荐文章于 2024-10-25 11:13:55 发布

huanglihui1007

最新推荐文章于 2024-10-25 11:13:55 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 前端 vue 文章标签： vue element-ui

本文链接：https://blog.youkuaiyun.com/huanglihui10071030/article/details/98879148

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文探讨了Element-UI框架中表单组件在数据改变后视图未更新的问题，通过实例展示如何使用$forceUpdate()方法强制更新视图，解决表单组件无法响应数据变化的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui 某些表单组件无效/不更新视图/无法输入，

在textarea中输入文字，原本失效的表单更新视图了，经过排查，应该是数据改变了但是视图没更新

<el-form-item label="联系人" prop="Contact_Man">
                <el-input v-model="quoationData.Contact_Man" type="text" @input="updateInput"></el-input>
              </el-form-item>

updateInput(e) {
  this.$forceUpdate()
}

使用this.$forceUpdate()强制渲染

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huanglihui1007

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element-ui v2.15.13离线文档解压后双击index.html即可-V20240913

09-13

值得一提的是，Element UI的组件和文档都遵循Vue的响应式原理，使得数据和视图同步更新，这对于动态数据展示尤为重要。同时，Element UI还考虑到了国际化和可访问性的问题，允许开发者轻松地创建支持多语言和兼容性...

Vue ~ element-ui 动态表单验证，支持添加和删除操作

07-27

在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...

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

详解elementUI中input框无法输入的问题

10-15

主要介绍了详解elementUI中input框无法输入的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue使用elemnt-ui组件级联选择器，data更新了，但是视图没有更新，解决方法

qq_36546490的博客

03-11

2301

现这样的情况的时候先是很懵逼，为什么别的页面用的好好的，但是现在又使用不了。 1.首先，检查一下data中的值是否存在，如果存在，一般数据都会在异步请求中去获取，打印出来看一看。因为级联选择器的值一般是数组，改变数组的值data可能不会被监听到，可以使用$set的方法进行赋值。 this.$set(this.info, "xjqh", {city: {name: '北京市', val:'001'}, country: {name: '朝阳区', val:'011'}}) 2.如果还是不能赋值，可以考

Vue表单回显页面不更新，表单赋值不更新，表单失效

dg_xdg的博客

09-14

1990

比如表单中有个name字段，如果他被监听了，那一定有个getName和setName之类的方法，这是Vue框架给添加的；直接赋值一个对象导致这些内部的绑定丢失了，vue2中的对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。表单在绑定v-model="form"时，form里面的字段被表单内的各个输入框绑定了；点击编辑时，打开一个表单窗口，请求接口拿到数据后赋值给表单，表单直接不能用了。然后页面中输入框输入值，发现form中的对应字段不改变。输出一下form，发现输出的对象。

element ui 输入框数据无法更新

bigbigpigsobig的博客

12-14

2001

Vue结合使用element-ui组件，如输入框，下拉框的时候，有时候会遇到无法更新数据的问题，明明已经赋值了，但是视图上没更新数据，对此有以下两个方法可解决： 1、this.$set 强制渲染 html代码 <el-input v-model="detailContent.value" @input="forceInput"></el-input> js代码 force...

element中 el-eslect 多选编辑赋值后无法更新视图显示

wang08212005的博客

12-09

1199

1.创建表单新增角色下拉选择提交roleIds是个数组 2.编辑回填，先查详情数据接口返回roleIds这个提交的数据及Options 数据，根据响应的数据赋值给form 3.点击下拉选择视图数据没更新，因为下来数据是循环别的接口数据取得，因为数据层次太多，render函数没有自动更新，需手动强制刷新。 @change="$forceUpdate()" ...

element-ui离线

01-03

Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为 Vue 2.0 提供了丰富的界面元素和设计风格，使得开发者能够快速构建美观且功能强大的 Web 应用程序。"element-ui离线" 版本是 Element UI 的一个离线包，包含了...

Vue实战项目：电商管理系统（Element-UI）-vue-shop-admin.zip

11-04

2. **Element-UI**：Element-UI提供了丰富的UI组件，如表格、按钮、表单、通知等，极大地提高了开发效率。在本项目中，开发者可以根据需要选择并定制这些组件，以构建符合电商系统需求的界面。 3. **Vue Router**：...

使用Vue.js和Element-UI做一个简单登录页面的实例

10-18

Element-UI是饿了么前端团队开发的一套基于Vue 2.0的桌面端组件库，它包含了丰富的UI组件，例如按钮、输入框、表单等，并且遵循了通用的规范设计，使得开发者能够快速构建高质量的Web应用。 3. 登录页面的构建：在...

element-ui 表格修改后表格里面的数据后页面不实时更新问题

weixin_43173924的博客

08-13

4771

https://blog.youkuaiyun.com/wuj1935/article/details/106025559

解决vue数据更新视图不更新

fvbxjnch的博客

08-13

1467

出现的问题：当我们点击按钮，为student添加一个age属性，数据已经更新，但是视图层并没有更新数据。出现的原因：由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化解决这个问题的方法大体有两种：使用this.$set(obj, key, value)/vue.set(obj, key, value) <script> export d

element下拉框选择值不更新问题

weixin_51010848的博客

09-17

862

<el-form-item label="设备状态：" :label-width="formLabelWidth" prop="deviceState"> <el-select v-model="addDeviceForm.deviceStateName" placeholder="设备状态" @change="onSelectedStatusAdd"> <el-option v-for="item in check_status" :key=...

element,i18n表单校验切换实时更新

qf优快云的博客

08-12

874

1. 定义setFormRules方法，组件mounted时调用setFormRules方法，实时侦听语言切换。 2. 将校验规则和自定义校验都写在计算属性中，依赖缓存切换。校验规则需要return 两种方法都可以实现，暂时不知道去区别在哪。 ...

vue Element U 解决表格数据不更新问题