Element-Plus在進(jìn)行reactive在對登錄用戶密碼輸入輸入時失效，最后發(fā)現(xiàn)是<el-form>,在進(jìn)行ref和model進(jìn)行綁定的時候，綁定的屬性名稱都是一致的，導(dǎo)致界面無法輸入，如下圖所示都綁定的是：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">系統(tǒng)登錄</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="驗(yàn)證碼, 單擊圖片刷新"
                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>

此時界面操作輸入框，是無法編輯的：

而<el-form>修改的model="loginForm"，ref="loginForm"，確保兩個引用名稱不一致，否則會導(dǎo)致界面無法預(yù)覽，界面輸入框操作恢復(fù)正常，修改后的代碼截圖如下：?文章來源地址http://www.zghlxwxcb.cn/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">系統(tǒng)登錄</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="驗(yàn)證碼, 單擊圖片刷新"
                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>

到了這里，關(guān)于vue3+element-plus 表單輸入框無法輸入的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！