Cannot enter data into form input after using composition api in vue 3

Question

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" class="login">
            <el-card shadow="always">
                <template #header>
                    <span>Memeber Login</span>
                </template>
                <div class="login__inner">
                    <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

If you are using vue3, where do the el-x components come from? — Nechoj
– Nechoj, Commented Nov 30, 2021 at 8:16
I am also using element-plus ui library that where the el-* components come from — Noor
– Noor, Commented Nov 30, 2021 at 8:31
they have been imported in main.js.. the components work fine when i use the old options api it works but when i change it to comp-api that's when this problem occurs ... I just added the image that shows the components working — Noor
– Noor, Commented Nov 30, 2021 at 8:49

assd12138 · Accepted Answer · 2021-11-30 10:35:53Z

1

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

answered Nov 30, 2021 at 10:35

assd12138

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nechoj · Accepted Answer · 2021-11-30 09:21:13Z

0

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.

answered Nov 30, 2021 at 9:21

Nechoj

1,5921 gold badge12 silver badges20 bronze badges

1 Comment

Noor Over a year ago

What you have done is the option API I was trying to do it using Composition API, Thanks

Collectives™ on Stack Overflow

Cannot enter data into form input after using composition api in vue 3

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related