电子商务网站设计心得体会,营业执照注册,做网站什么语言,网页空间是什么最近在 Vue3 ElementPlus 中#xff0c;使用 el-input 组件时#xff0c;如果设置了 v-model#xff0c;那么在每次改变内容后后#xff0c;input 会自动失去焦点#xff0c;这样会导致用户无法输入多个字符。 一、问题原因
如上图所示#xff0c;配置项的 Name 和 Cod…最近在 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 对于当前这一组节点是不变的。
代码演示
templatedivv-for(item, index) in form.config:keyindexclassflex items-center mb-5px p-10px pl-50pxdiv classm-5px color-#999Name:/divel-input classw-139px v-modelitem.value placeholder请输入 /div classcolor-#999 m-5pxCode:/divel-input classw-139px v-modelitem.key placeholder请输入 /el-buttonclickdelConfig({ ...item, index })linkclassml-10px:disabledform.config.length 1el-icon size16 color#409effIEpDelete //el-icon/el-buttonel-buttonlinkclassml-10pxv-ifform.config.length - 1 indexclickaddConfigel-icon size16 color#409effIEpPlus //el-icon/el-button/div
/template欢迎访问天问博客
