本文介绍: 最近在 Vue3 + ElementPlus 中，使用 el-input 组件时，如果设置了 v-model，那么在每次改变内容后后，input 会自动失去焦点，这样会导致用户无法输入多个字符。
最近在 Vue3 + ElementPlus 中，使用 el-input 组件时，如果设置了 v-model，那么在每次改变内容后后，input 会自动失去焦点，这样会导致用户无法输入多个字符。
一、问题原因
如上图所示，配置项的 Name 和 Code 都是使用 el-input 组件 v-for 遍历渲染的，都绑定了 v-model，而 :key 绑定的是对应的 Code 值。
所以，当 Code 改变后，当前所在的节点 key 值也改变了，根据 Vue 的 diff 算法，key 值改变后会导致节点重新渲染，这也就会导致 Code 在每输入一个字符后，input 自动失去焦点。
二、解决方案
解决方案很简单，只需要将 :key 绑定的值改为 index 即可，因为 index 对于当前这一组节点是不变的。
代码演示：
欢迎访问：天问博客
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
