VUE+element-ui使用中的坑（一）——el-input无法输入

情况说明

问题描述

无论是单独的el-input输入框，还是把它们放在表单项中，有时都会出现无法输入的问题：虽然鼠标可以点击此输入框，但还是没有办法显示出键盘的输入。

前人文章

在CSDN上有看到一些前辈的说法，比如：

1. 在el-input标签中添加@input=“change($event)”：

2. 去实现此change(e)方法，效果为强行刷新视图：

change (e) {
      this.$forceUpdate()
    },

但是又有很多朋友反馈会有表单验证失效的问题等等。

解决措施

产生原因

前人的解决方案似乎并不“完美”。我在想，element-ui作为一个比较完整的ui库，应该早就考虑到了此问题。毕竟官方文档是学习的第一资料，我们来到官方文档可以发现，在input输入组件中有这样的提示：
显然，一开始我们并没有绑定值，加上提示内容中所说的“显示的值将不会改变”，因此造成了“无法输入”的现象。

解决方案

还是按照文档中的提示来，我们有两个解决办法：

1. 处理input事件并更新组件的绑定值；
2. 使用v-model。

然而实际上，这两种方案是完全等效的，因为v-model是一个语法糖，使用v-model的效果等同于第一种处理方案：

<input v-model="test">

本质上等同于：

<input :value="test" @input="test = $event.target.value">

因此个人更推荐使用v-model，同时也是官方文档中使用的方式（毕竟是语法糖，使用起来还是很方便的）。详情用法请看代码以及其中的注释：

1. 对于普通的input组件：

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
    //这里一定要记得返回v-model中绑定的值！
      input: ''
    }
  }
}
</script>

2. 对于表单中的input组件：

<!--其他的先不管，此问题核心在于这里的 :model="formName"要设置 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="用户">
  <!--这里的v-model中所需要的内容就是form的:model中所写的"formName"，加上自己所对应的属性名，如"user"-->
    <el-input v-model="formInline.user" placeholder="用户"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
      //这里所对应的其实就是表单和表单项数据，名称都是一致的
        formInline: {
          user: ''
        }
      }
    }
  }
</script>

总结

这种问题产生是因为input在vue中的受控，我们需要去重新改变一下监听和实现。推荐使用v-model语法糖，这也是element-ui官方文档中的做法，并且要配合在返回数据中的名称，这是核心解决思想。如果有表单需要设置表单标签的属性，保持前后一致即可。当然，名称其实是自定义的，全凭自己习惯和喜好。
另外温馨提示，不要眼花把v-model用在el-form-item标签中哦！那样是无效的，必须在el-input标签中才行。

附录

（想要了解更多有关v-model的用法和知识点请看这篇前人文章：https://www.cnblogs.com/mark5/p/11603428.html）