vue+element-ui中form輸入框無法輸入問題的解決方法

更新時間：2023年04月06日 08:40:46 作者：c-onevg

很多初次接觸element-ui的同學,在用到element form組件時可能會遇到input框無法輸入文字的問題,下面這篇文章主要給大家介紹了關于vue+element-ui中form輸入框無法輸入問題的解決方法,需要的朋友可以參考下

一.問題發(fā)現(xiàn)：

筆者在制作登錄頁面前端時使用elementui+vue技術，發(fā)現(xiàn)輸入框無法輸入任何內(nèi)容。

在csdn上查閱很多文章后發(fā)現(xiàn)都無法解決，于是去elementui官網(wǎng)進行反復查看才發(fā)現(xiàn)問題所在。最終發(fā)現(xiàn)問題是input標簽中v-model寫的不恰當導致無法生效/忘記書寫v-model。如果有相同問題的可以看看本文有可能能幫助解決您的問題，下列解決過程以供參考。

二.正確案例與錯誤原理：

查看官網(wǎng)對于表單Form一欄的使用說明，官網(wǎng)首先給出了一個經(jīng)典案例，其中就有我們需要的“在form中成功實現(xiàn)input需求"這一功能。例如下圖中的Activity form:

...中間其他功能為了便于觀看進行了省略，只抓取了重要內(nèi)容。

可以發(fā)現(xiàn)重要的一點，即在<el-form>中寫<el-input>必須要在input標簽中定義v-model，具體應為v-model:表格model.輸入內(nèi)容名。且之后還需要對表格model中屬性進行初始化操作，否則仍然會報錯。

三.問題解決

第一種情況: 官網(wǎng)可以解決

可以先嘗試使用上面官網(wǎng)給出的寫法，在后續(xù)的<script>中import reactive，再用const form進行初始化，如果不報錯那么就可以成功實現(xiàn)輸入功能，如官網(wǎng)演示。

第二種情況：官網(wǎng)不能解決，頁面仍無法顯示，npm控制臺報一個Warning，Waring內(nèi)容為：export default (reexported as default ) was not found in -!..

這個問題主要出在<script>中，由于版本等問題該vue文件不支持官網(wǎng)的寫法，即無法使用import { reactive} from 'vue'。這也是筆者遇到的問題，下面給出我的一種解決方案：在script標簽中使用data返回表中屬性來初始化內(nèi)容。此圖中的login是我自己開發(fā)過程中定義的表格名，相當于官網(wǎng)中的form，username和password相當于表格需要輸入的屬性，input標簽中 v-model仍然使用v-model:表格model.輸入內(nèi)容名的方式表示。