解決antdv 中input每輸入一個字符就失去焦點

1、問題出現(xiàn)
  我用v-for循環(huán),里面包括a-input節(jié)點,但每次按輸入或者刪除鍵,都會失去焦點,不能連貫輸入就很懊惱??!
2、問題猜想
  可能是因為代碼中哪里觸發(fā)了render,使組件進行重新渲染,所以輸入框自然就失去了焦點。
3、解決方法
  最終還是代碼問題,v-for循環(huán)里的 key 值是包括a-input的輸入的內(nèi)容,每輸入一個字符,key就會改變,引發(fā)render重新渲染。

<span v-for="(key, value) in entity_item"
     :key="key"
     v-show="value === columns_item.model" >
  <a-input v-model="entity_item[columns_item.model]" />
</span>

只要把key變成常量就可以了

<span v-for="(key, value) in entity_item"
     :key="value"
     v-show="value === columns_item.model" >
  <a-input v-model="entity_item[columns_item.model]" />
</span>

4、結(jié)論
  寫代碼要注意:v-for的key是否是可改變的,并且該key值與你所輸入的控件綁定或會被該控件間接影響。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容