vue3+element-plus 表单输入框无法输入

最新推荐文章于 2024-09-14 18:34:40 发布

veceny

最新推荐文章于 2024-09-14 18:34:40 发布

阅读量4.3k

点赞数 1

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/veceny/article/details/129474566

版权

在使用Vue3和Element-Plus时遇到表单输入框无法输入的问题，原因是<el-form>组件的ref和model属性绑定相同名称（loginForm）。解决方法是将两者名称改为不同，确保ref和model引用不一致，从而恢复表单输入功能。

摘要由CSDN通过智能技术生成

Element-Plus在进行reactive在对登录用户密码输入输入时失效，最后发现是<el-form>,在进行ref和model进行绑定的时候，绑定的属性名称都是一致的，导致界面无法输入，如下图所示都绑定的是：loginForm,代码入下图所示：

<template>
  <el-form
    :model="loginForm"
    ref="loginForm"
    label-position="left"
    label-width="0px"
    class="demo-ruleForm login-container"
  >
    <span class="tool-bar"> </span>
    <h2 class="title" style="padding-left: 22px">系统登录</h2>
    <el-form-item prop="account">
      <el-input
        type="text"
        v-model="loginForm.account"
        auto-complete="off"
        placeholder="账号"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="loginForm.password"
        auto-complete="off"
        placeholder="密码"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item>
          <el-col :span="12">
            <el-form-item prop="captcha">
              <el-input
                type="test"
                v-model="loginForm.captcha"
                auto-complete="off"
                placeholder="验证码, 单击图片刷新"