目錄
一.問題發(fā)現(xiàn)：
二.正確案例與錯(cuò)誤原理：
三.問題解決
一.問題發(fā)現(xiàn)：
筆者在制作登錄頁(yè)面前端時(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)不能解決，頁(yè)面仍無法顯示，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)屬性：
文章來源：http://www.zghlxwxcb.cn/news/detail-782003.html
?希望可以解決您的問題，感謝閱讀。文章來源地址http://www.zghlxwxcb.cn/news/detail-782003.html
到了這里，關(guān)于[vue+element-ui] form中輸入框無法輸入問題的解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
