問題重現

vue 版本: 2.6
element-ui版本: 2.14.1
今天使用elementUI 進行表單校驗，主要通過:rules屬性設置限制條件，在el-from-item上設置prop屬性，進行校驗，具體語法請參考element-ui 表單校驗。

部分代碼

// 表單
<el-form :model="loginForm" :rules="loginRules" ref="loginForm">
          <el-form-item prop="userName">
            <el-input v-model="loginForm.userName" placeholder="帳戶" prefix-icon="el-icon-user-solid" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密碼" prefix-icon="el-icon-lock" auto-complete="off"></el-input>
          </el-form-item>
</el-form>
// 校驗
loginRules: {
        userName: [
          { required: true, message: '帳號不能為空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密碼不能為空', trigger: 'blur' }
        ],
}

主要原因，el-form 綁定對象使用的是v-model，而不是:model。

• v-model 表示value屬性。 自定義組件的 v-model
• :model表示子組件有個prop叫model。

解決方案

1. prop的屬性名稱應與input輸入框綁定屬性名稱一致
2. el-form 綁定對象請使用 :model

補充

找bug，千萬別上頭。上頭容易忽略細節，影響心境。建議先處理其他事情或者刷刷某視頻，聽聽音樂，平心靜氣。