vue3+element-plus 表单输入框无法输入-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+element-plus 表单输入框无法输入。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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="验证码, 单击图片刷新"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">&nbsp;</el-col>
          <el-col :span="11">
            <el-form-item>
              <img
                style="width: 100%"
                class="pointer"
                :src="loginForm.src"
                @click="refreshCaptcha"
              />
            </el-form-item>
          </el-col>
        </el-form-item> -->
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 48%" @click="reset"
        >重 置</el-button
      >
      <el-button
        type="primary"
        style="width: 48%"
        @click="dologin"
        :loading="loading"
        >登 录</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive,ref } from "vue";
import { Login } from "../../../apis/login/login.js";

// 用户登录信息
let loading=false;
const test=ref("");
const loginForm =reactive({
  account: "",
  password: "",
});
//重置
function reset() {
  loginForm.account = "";
  loginForm.password = "";
  return "";
}
function dologin(loginForm) {
  let data = Login(loginForm);
  console.log(data);
  return data;
}
</script>
<style  scoped>
/* .myform {
  width: 200px;
  height: 180px;
  text-align: center;
  margin-right: 20px;
  background-color: #050;
} */
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    /* box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #505458;
    } */
  }
</style>

此时界面操作输入框，是无法编辑的：

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

而<el-form>修改的model="loginForm"，ref="loginForm"，确保两个引用名称不一致，否则会导致界面无法预览，界面输入框操作恢复正常，修改后的代码截图如下：文章来源地址https://www.toymoban.com/news/detail-508541.html

<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="验证码, 单击图片刷新"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">&nbsp;</el-col>
          <el-col :span="11">
            <el-form-item>
              <img
                style="width: 100%"
                class="pointer"
                :src="loginForm.src"
                @click="refreshCaptcha"
              />
            </el-form-item>
          </el-col>
        </el-form-item> -->
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 48%" @click="reset"
        >重 置</el-button
      >
      <el-button
        type="primary"
        style="width: 48%"
        @click="dologin"
        :loading="loading"
        >登 录</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive,ref } from "vue";
import { Login } from "../../../apis/login/login.js";

// 用户登录信息
let loading=false;
const test=ref("");
const loginForm =reactive({
  account: "",
  password: "",
});
//重置
function reset() {
  loginForm.account = "";
  loginForm.password = "";
  return "";
}
function dologin(loginForm) {
  let data = Login(loginForm);
  console.log(data);
  return data;
}
</script>
<style  scoped>
/* .myform {
  width: 200px;
  height: 180px;
  text-align: center;
  margin-right: 20px;
  background-color: #050;
} */
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    /* box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #505458;
    } */
  }
</style>

到了这里，关于vue3+element-plus 表单输入框无法输入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！