Vue3使用Composition API后表单input输入框无法录入数据问题

问题原因与修复方案 #

你遇到的输入框无法录入内容的核心问题大概率是el-form的ref名称和你绑定的响应式对象user重名，Vue3中模板内的ref优先级高于setup返回的变量，重名后你v-model绑定的user.email、user.password实际指向的是el-form组件实例，而非你定义的响应式对象，自然无法正常双向绑定。

除此之外也可以同步排查以下常见问题：

• 确认Element Plus的ElForm、ElFormItem、ElInput组件已正确注册，按需导入的用户容易出现组件漏注册导致双向绑定失效的问题
• 确认Vue版本和Element Plus版本适配，避免跨大版本混用出现兼容性问题

修复后的代码示例

<template>
    <el-row justify="center">
        <el-col :span="6" class="login">
            <el-card shadow="always">
                <template #header>
                    <span>Member Login</span>
                </template>
                <div class="login__inner">
                    <!-- 把ref名改为userForm，避免和响应式对象user重名 -->
                    <el-form ref="userForm" :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>

修改后重新运行即可正常输入。

内容的提问来源于stack exchange，提问作者Noor