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。