iview Input 输入一个字符就主动失焦问题的解决

最新推荐文章于 2025-03-12 18:23:50 发布

团子Y

最新推荐文章于 2025-03-12 18:23:50 发布

阅读量1.6k

点赞数 2

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_43778935/article/details/119007174

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在使用iview组件库时遇到的Input组件在输入一个字符后立即失焦的问题，详细分析了问题原因在于key值绑定方式。通过将key值绑定从`inputItem.name+index`更改为`index`，避免了输入内容引起元素更新，从而解决了Input失去焦点的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：
今天在使用iview组件库中的Input时,为组件设置了on-blur事件，但是发现每输入一个字符就会失焦触发on-blur事件，导致输入不断触发验证。
解决如下：

<FormItem v-for="(inputItem,index) in nodeData.inputs" :key="index" :label-width="10">
                <span v-if="!editInputName[index]">{{inputItem.name}}</span>
                <Input v-else style="display: inline;" v-model="inputItem.name" @on-blur="outChanged('inputs', index)"/>
                <Icon type="ios-create-outline" v-if="invoke"  size="20" @click="editEndpointName('editInputName', index)" color="#2b85e4"/>
                <span>({{inputItem.datatype}})</span>  
  </FormItem>