解决Vue + ElementUI表单文本框无法输入问题

需求引入

一般来说网页中都会存在Form表单以供填写, 常用的编辑页面会从后台获取到数据并赋值到文本框中, 并会对文本框进行数据的绑定, 然后通过某个方法去给文本框进行赋值, 如下图所示, 这样经常会导致文本框无法修改数据和下拉框选择无效的情况, 这篇文章将就是为了解决这个问题.
图一, 表单代码示例
图二, 数据获取后赋值示例

表单图片例子

导致原因

引入Vue官方链接: https://cn.vuejs.org/v2/guide/reactivity.html
官方原文: Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

个人理解: 这里我们涉及到的就是上文中提到的对象, Vue 无法检测对象 property 的添加或移除, 如果property是直接在data中存在的那么是可以正常响应的, 如果是一个对象的property, 那么Vue其实是无法做出正常响应的 或者是后续才有的property, 压根就没定义, 而是后面才定义并赋的值.
正常响应:
图三, 正常响应
非正常响应:
图四, 非正常响应
非正常响应:
图五, 非正常响应
其实很明了了, 想要响应式, 必须要直接在data中优先定义好, 且定义的类型必须不是对象、数组.

问题解决方式

普通变量在我自己参与的项目中其实用到的并不多, 更多的是对象, 下图所示, 直接不赋任何字段值, 后续在api方法中自动赋值.
图六, 未初始化定义方式

图七, 根据data动态赋值

这样直接赋值是无法做到页面数据响应的, 也就是上面说到的输入框无法修改赋值好的值, 下拉框无法选择初始化之外的值.
解决方式一: 网上很多人说使用forceUpdate进行强制更新, 这样的话必须每个input都加上这么个东西, 非常的繁琐, 也并非官方推荐的方式.

图九, 强制更新

解决方式二: 方式二也是我个人较为推荐的使用方式. 使用Vue官方推荐的, Object.assign() 或 _.extend()方法
Object.assign(): 方法用于将所有可枚举属性的值从一个或多个源对象source复制到目标对象。它将返回目标对象target
该方法的浅拷贝特性, 可以助我们修改 / 增加原属性的值.

1. data中定义了空对象form
data中定义了空对象form
2. 赋了各种类型的值后, 通过assign方法影响原属性使其变为响应
赋了各种类型的值后, 通过assign方法影响原属性使其变为响应
经过这样处理后表单中的全部控件均是响应式.

Logo

前往低代码交流专区

更多推荐