记录一个关于vue+ElementUI的表单验证和重置的无效的错误

代码如下：

<!-- 表单区域 -->
      <el-form ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form" :model="loginForm">
        <!-- 用户名 -->
        <el-form-item prop="userName">
          <el-input placeholder="用户名" prefix-icon="iconfont icon-user"  v-model="loginForm.userName" >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="userPwd">
          <el-input placeholder="密码" prefix-icon="iconfont icon-3702mima" v-model="loginForm.userPwd" type="password" >
          </el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" v-on:click="login">登陆</el-button>
          <el-button type="info" v-on:click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <script>
  export default {
    data() {
      return {
        loginForm: {
          userName: '',
          userPwd:''
        },
        loginFormRules:{
          userName: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
          userPwd: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
               ]
        }
      }
    },
    methods:{
      login:function(){
      },
      reset:function(){
        this.$refs.loginFormRef.resetFields();
      }
    }

  }
</script>

以上代码是已经修改过的，之前写好后自动校验无法校验文本框内容，并且重置也无法重置其内容。后来发现ElementUI中prop属性必须和v-model中设计的属性名一致，否则将不起作用。
以此警示自己及其他自学者！