vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題

更新時(shí)間：2023年04月23日 10:07:47 作者：九品碼農(nóng)_

這篇文章主要介紹了vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入

在使用element組件出現(xiàn)<el-input >標(biāo)簽無法輸入，苦惱了好久、頭發(fā)也掉了好幾根(腦補(bǔ)掉頭發(fā)的情景....)，終于在靈光一閃的情況下解決了這個(gè)”大問題“。

第一種情況

話不多說直接上代碼：

錯(cuò)誤代碼：

<el-form size="mini" :label-position="labelPosition" label-width="80px" :model="user">
? ? <el-form-item label="姓名:">
? ? ? ? <el-input size="mini" ?v-model="user.name"></el-input>
? ? </el-form-item> ??
? ? <el-form-item label="聯(lián)系方式:">
? ? ? ? <el-input size="mini" v-model="user.type"></el-input>
? ? </el-form-item>
</el-form>

data(){
? ? ? return {
? ? ? ? ? ? user: {
? ? ? ? ? ? ? ? ? name: '',
? ? ? ? ? ? ? ? ? phone: ''
? ? ? ? ? ? ? ? }
? ? ? ?}
}

方法：

methods: {
? ? ? ? ? ? doAddUserInfo() {
? ? ? ? ? ? ? ? this.user = '';
? ? ? ? ? ? ? ? this.addDislogVisible = true;
? ? ? ? ? ? }
}

提出錯(cuò)誤的代碼，可能有些大佬已經(jīng)看出來錯(cuò)誤的地方了，在下不才墨跡了好久才弄出來??????????......

在下出現(xiàn)的錯(cuò)誤地方就是在點(diǎn)擊事件@click="doAddUserInfo",執(zhí)行該方法的時(shí)候腦袋闊子瓦特了，把表單中要使用的user對(duì)象賦值為空了，修正之后問題也就解決了

正確的方法應(yīng)該為：

methods: {
? ? ? ? ? ? doAddUserInfo() {
? ? ? ? ? ? ? ? //去除此處的代碼即可 ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? //this.user = '';
? ? ? ? ? ? ? ? this.addDislogVisible = true;
? ? ? ? ? ? }
}

第二種情況

el-input 標(biāo)簽中沒有綁定form表單mode的屬性值

解決方案：

v-model = "mode.A"

ok，解決~

el-input無法輸入產(chǎn)生原因

昨天項(xiàng)目有個(gè)需求，從接口獲取數(shù)據(jù)后覆蓋原來的數(shù)據(jù)，沒多想，覺得很簡(jiǎn)單啊，直接賦值就覆蓋原來的數(shù)據(jù)了，但是這么做后輸入框突然不能輸入值了，但是確實(shí)是有觸發(fā)輸入事件的，廢話少說，上圖。

這里的話，el-input綁定的是testItemValue,而這個(gè)值是包含在上圖的list對(duì)象里的，我選擇了直接覆蓋list對(duì)象，這時(shí)候造成了list[index]引用了item對(duì)象，而el-input綁定的還是原來的對(duì)象，輸入的值也不會(huì)賦值給現(xiàn)在的對(duì)象，解決這個(gè)問題的方法就是遍歷賦值，網(wǎng)上有些說用JSON.stringify和JSON.parse來進(jìn)行深拷貝，這個(gè)也是不行的，這種深拷貝的方法也是直接引用了另一個(gè)對(duì)象，還是會(huì)有不能輸入的問題，用下圖這種方法就能輕松解決了(若兩個(gè)對(duì)象的屬性完全相同，也可以使用解構(gòu)賦值)