在 vue 3 中使用组合 api 后无法将数据输入表单输入

Question

我有以下代码，我在其中创建一个简单的登录表单，一切正常文件，直到我尝试输入表单输入，似乎我无法输入表单字段。以下是我的代码。我必须提到我还没有调用任何服务器 api。

<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>

编辑：这是图片。

Image Link

Answer 1

为 <script> 部分尝试以下替代方法：

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

其中 LoginForm 是您的组件名称。

Answer 2

ref="user" el-form 的属性与响应式 user 冲突键，只需使用其他词，如 ref="userForm" 参见 here

在 vue 3 中使用组合 api 后无法将数据输入表单输入

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

vue.js

vuejs3