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

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

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

二.正確案例與錯(cuò)誤原理：

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

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

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

三.問題解決

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

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

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

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

 最終實(shí)現(xiàn)的效果如下，輸入欄中已經(jīng)可以輸入內(nèi)容，該form中兩個(gè)input在同一行的原因是form中添加了inline:true內(nèi)聯(lián)屬性：

總結(jié)

到此這篇關(guān)于vue+element-ui中form輸入框無法輸入問題的解決方法的文章就介紹到這了,更多相關(guān)element-ui form輸入框無法輸入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論