vue在使用element組件出現(xiàn)<el-input>標簽無法輸入的問題
使用element組件出現(xiàn)<el-input>標簽無法輸入
在使用element組件出現(xiàn)<el-input >標簽無法輸入，苦惱了好久、頭發(fā)也掉了好幾根(腦補掉頭發(fā)的情景....)，終于在靈光一閃的情況下解決了這個”大問題“。
第一種情況
話不多說直接上代碼：
錯誤代碼：
<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;
? ? ? ? ? ? }
}提出錯誤的代碼，可能有些大佬已經(jīng)看出來錯誤的地方了，在下不才墨跡了好久才弄出來??????????......
在下出現(xiàn)的錯誤地方就是在點擊事件@click="doAddUserInfo",執(zhí)行該方法的時候腦袋闊子瓦特了，把表單中要使用的user對象賦值為空了，修正之后問題也就解決了
正確的方法應該為：
methods: {
? ? ? ? ? ? doAddUserInfo() {
? ? ? ? ? ? ? ? //去除此處的代碼即可 ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? //this.user = '';
? ? ? ? ? ? ? ? this.addDislogVisible = true;
? ? ? ? ? ? }
}第二種情況
el-input 標簽中沒有綁定form表單mode的屬性值
解決方案：
v-model = "mode.A"
ok，解決~
el-input無法輸入產(chǎn)生原因
昨天項目有個需求，從接口獲取數(shù)據(jù)后覆蓋原來的數(shù)據(jù)，沒多想，覺得很簡單啊，直接賦值就覆蓋原來的數(shù)據(jù)了，但是這么做后輸入框突然不能輸入值了，但是確實是有觸發(fā)輸入事件的，廢話少說，上圖。
這里的話，el-input綁定的是testItemValue,而這個值是包含在上圖的list對象里的，我選擇了直接覆蓋list對象，這時候造成了list[index]引用了item對象，而el-input綁定的還是原來的對象，輸入的值也不會賦值給現(xiàn)在的對象，解決這個問題的方法就是遍歷賦值，網(wǎng)上有些說用JSON.stringify和JSON.parse來進行深拷貝，這個也是不行的，這種深拷貝的方法也是直接引用了另一個對象，還是會有不能輸入的問題，用下圖這種方法就能輕松解決了(若兩個對象的屬性完全相同，也可以使用解構賦值)
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue.js之slot深度復制的相關資料，文中介紹的很詳細，對大家具有一定的參考價值，需要的朋友們來一起看看吧。2017-03-03
這篇文章主要介紹了Vue入門之a(chǎn)nimate過渡動畫效果的相關資料,需要的朋友可以參考下2018-04-04
深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關于vue.js中$watch的oldvalue與newValue的相關資料，文中通過示例代碼介紹的非常詳細，并且介紹了關于watch的其他測試，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-08-08
在?Vue?開發(fā)中,圖片的引用方式主要取決于圖片存放的位置,一般有四種常用的存放方式,本文將詳細分析這些方式的區(qū)別,并提供完整的代碼示例,希望對大家有所幫助2025-02-02
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了Django+Vue跨域環(huán)境配置詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了解決element-ui的下拉框有值卻無法選中的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關于vue組件文檔（.md）中如何自動導入示例（.vue）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
基于vue-cli vue-router搭建底部導航欄移動前端項目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導航欄移動前端項目,項目中主要用了Flex布局，以及viewport相關知識，已達到適應各終端屏幕的目的。需要的朋友可以參考下2018-02-02