【原创】Element UI 中 el-input 无法输入的解决办法

问题现象:el-input 可以点击,却显示不出键盘输入的内容。
解决:

  • 将 el-input 的 value 属性修改为 使用 v-model 实现。

    <el-input width="260px" v-model="inputValue"></el-input>
  • 使用 input 事件,实时刷新,两种方法本质其实是相同的。

    <el-input
          width="260px"
          :value="inputValue"
          @input="inputValue = $event"
        ></el-input>
  • 通过input事件,在 change 事件中执行 this.$forceUpdate()强行刷新视图。

    <el-input
          width="260px"
          :value="inputValue"
          @input="change($event)"
        ></el-input>

总结:问题产生的原因是由于 input 在 vue 中受控导致,elementUI 官方文档也有说明。推荐使用 v-model,用起来比较简便。

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注