element-ui表单验证，value一直为undefined的一种可能解决方案

有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下：

<template>
  <el-form :rules="rules">
    <el-form-item prop="value">
      <el-input v-model="form.value"/>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    var validator = (rule, value, callback) => {
      if (!value) {
        console.log(value);
        callback(new Error('请输入'));
      } else {
        callback();
      }
    };
    return {
      form: {
        value: ''
      },
      rules: {
        value: [{ validator, trigger: 'blur' }]
      }
    };
  }
};
</script>

这里控制台会一直输出undefined。

排查之后发现，因为<el-form>标签没有绑定model……不是只给<el-input>绑定v-model就可以的，同时还要指定model。正确写法应该如下：

<template>
  <!--要在这里指定model-->
  <el-form :model="form" :rules="rules">
    <el-form-item prop="value">
      <el-input v-model="form.value"/>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    var validator = (rule, value, callback) => {
      if (!value) {
        console.log(value);
        callback(new Error('请输入'));
      } else {
        callback();
      }
    };
    return {
      form: {
        value: ''
      },
      rules: {
        value: [{ validator, trigger: 'blur' }]
      }
    };
  }
};
</script>

总结一下，目前遇到的这个报错，有三种可能：

1. <el-form-item>上的prop名称不对，应当与rules中的名称一致；
2. 绑定的属性没有在data中声明；
3. 没有在<el-form>上指定model。