vue2中输入框无法输入

49 阅读2分钟

结论

通常是使用了ElementUI的输入框组件。
在原生组件中,几乎不存在无法输入的情况,存在也应该会报错。

在Element的input组件中,如果其绑定了一个未进行过初始化的值,并且在其他的事件方法中,修改了这个值,则会发生响应式丢失的问题。

共性

响应式丢失是由于Vue2实现响应式的原理是利用Object.defineProperty方法,劫持数据对象中的每一个属性。
那么结论也显而易见,由于劫持是定义在初始化阶段的,所以没劫持到我们需要的属性。
beforeCreated -> 劫持数据 -> created

  • 倘若用不存在的属性,绑定v-model到输入框上,如果先修改输入框,则相当于正常初始化(就好像数据被预先赋值了一样)。
    在这种条件下,我们将无法发现潜在的问题,会显得莫名其妙,一下子有问题,一下子又没问题。

element的问题

前面这个很好解释,但是element具有迷惑性。
element组件的事件函数中(比如选择器的@select),如果为数据添加了没有的属性(也就是我们说的响应式丢失),页面视图依然会刷新,就好像还是响应式的一样。

  • input输入框会无法输入,这是最大的问题,接触过Vue的或多或少都知道响应式丢失的问题,然而原生的输入框不存在无法输入的情况,即使是在响应式丢失的情况下,依然是可以输入的。

以上这些结合起来,就会显得莫名其妙,明明看着会跟着变,但是就是无法输入。

解决

初始值

  data() {
    return {
      dataInfo: {
        count: 0,
      },
    };
  },

比如说count是要修改的数据,那可以为其设置初始值。

this.$set

this.$set(this.dataInfo,'count', 555);

Vue.set,一样的用法。

更新整体

直接修改dataInfo

this.dataInfo = {
  ...this.dataInfo,
  count: 555
}