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值與你所輸入的控件綁定或會被該控件間接影響。