本文共 1632 字，大约阅读时间需要 5 分钟。

<template>  <div class="login_container">    <div class="login_box">      <div class="avatar_box">        <img src="../assets/logo.png" alt="" />      </div>      <!-- 登录表单区域 -->      <el-form        :model="loginForm"        :rules="loginFormRules"        label-width="0px"        class="login_form"      >        <!-- 用户名区域 -->        <el-form-item prop="username">          <el-input            v-model="loginForm.username"            prefix-icon="iconfont icon-user"          ></el-input>        </el-form-item>        <!-- 密码区域 -->        <el-form-item>          <el-input            v-model="loginForm.password"            prefix-icon="iconfont icon-3702mima"            type="password"          ></el-input>        </el-form-item>        <!-- 按钮 -->        <el-form-item class="btns">          <el-button type="primary">Login</el-button>          <el-button type="info">Reset</el-button>        </el-form-item>      </el-form>    </div>  </div></template><script>export default {     data () {       return {         loginForm: {           username: 'dean11',        password: '123456'      },      // 这是表单的验证规则对象      loginFormRules: {           username: [          {    required: true, message: '请输入用户名', trigger: 'blur' },          {    min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }        ],        password: []      }    }  }}</script>

在做表单验证功能的时候，发现验证不成功

已经输入用户名了还提示写用户名，但是提示没输入，说明没有获取到表单输入的数据

经排查发现是又把v-model和:model弄混淆了

v-model用于双向数据绑定，不会向子组件传递数据
:model是v-bind:model的缩写，是绑定自定义属性，它将父组件的数据传递给子组件

所以在上述代码的表单里：

v-model="loginForm"是双向数据绑定，并没有给子组件传递数据，所以下面的v-model="loginForm.uername"就获取不到loginForm

这样改一下就可以了：

转载地址：http://hstq.baihongyu.com/