Subscribe on changes!

for循环中渲染的input,不可连续输入

avatar
Nov 7th 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#eNo9kN1qwzAMhV9F6KYtJDFlPxchHew56l50qbK4q3+wlW4j5N0nO6P4xtI5+g7SjO8hNPeJsMUu9dEEhkQ8hTftjA0+MswQaYAFhugtbMS60a73LjEYFyZOcMiG7fGpeq5eqtfTTjvtOrXCBCMFkw23M5NUAN24h3s9+HjQuDUiVcZd6GcnuH+iRmi/6Ff0LGvMEM6vK7pMW3+hW9aL/1gAJxlTa4Ia92uweiRjhes+tT2H5pq8k43n7BZKESS2hdLJPdkz1xpH5pBapdLQ5ztdU+Pjp5JfEyfHxlJDydYf0X8nigLWmBGLdgsuf1NzeAI=

Steps to reproduce

  1. 打开复现代码
  2. 点击任意输入框进行输入

What is expected?

我希望可以在任意输入框可以进行连续输入。

What is actually happening?

输入框在输入字符后,失去焦点,需要再次点击才可以输入

System Info

No response

Any additional comments?

No response

avatar
Nov 7th 2022

先别加key, 或者key使用其他值,v-model导致数组值变化,使得v-for中绑定的key发生变化,重新渲染了input,从而失去焦点 Don't add a key, or use other values for the key, v-model causes the array value to change, which makes the key bound in v-for change, re-renders the input, and loses focus

avatar
Nov 7th 2022

as @baiwusanyu-c explains, you would need to use a stable key.