I have the following code where I am creating a simple login form everything works file until i try to type into the form input, it seems I cannot type into the form fields. The following is my code. I have to mention that I am not calling any server api yet.

<template>
    <el-row justify="center">
        <el-col :span="6" >
            <el-card shadow="always">
                <template #header>
                    <span>Memeber Login</span>
                </template>
                <div >
                    <el-form ref="user" :model="user">
                        <el-form-item>
                            <el-input
                                v-model="user.email"
                                placeholder="Email Address"
                                clearable
                                prefix-icon="message">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                v-model="user.password"
                                placeholder="Password"
                                clearable show-password
                                prefix-icon="lock"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">
                                <el-icon><check /></el-icon> Login
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="js">
import { reactive } from 'vue';

export default {
    setup() {
        const user = reactive({
            email: '',
            password: '',
        });

        return {
            user,
        };
    },
};
</script>

Edit: here is the image.

Image Link

CodePudding user response：

The attribute ref="user" on el-form conflict with reactive user key, just use other word like ref="userForm" See here

CodePudding user response：

Try the following alternative for the <script> section:

<script lang="js">
export default {
  name: "LoginForm",
  data() {
    return {
      user: {
          email: '',
          password: ''
        }
    }
};
</script>

where LoginForm is your component name.