<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
这样改一下就可以了: