iview的input输入框输入一个字符就失去焦点

最新推荐文章于 2023-03-22 18:31:36 发布
最新推荐文章于 2023-03-22 18:31:36 发布
阅读量722 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44046781/article/details/110003319
版权
本文探讨了在Vue.js项目中使用v-for指令遍历数组时如何正确设置key属性来避免潜在的问题，特别是在input元素绑定数据并进行模型更新的情况。建议不要使用如item.name这样的变化值作为key。

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

一般是使用input遍历数组时候

 <Row
        v-for="(item, index) in formValidate.ipList"
        :key="index+item.name"
        style="margin: 20px 0"
      >
      </Row>

问题点在于:key=“item.name”
input数据绑定后进行模型更新后，div的属性要刷新，进行渲染后就重新刷新的input.
不要用item.name这种做key值即可

工作-iview render Input输入一个字符自动跳出焦点
weixin_46254175的博客
12-01 838
背景 有一个场景，需要在表格中渲染输入框。这简单，但是，当我美美的欣赏的时候发现了一个问题。 嗯，我输入一个字符后，就失去焦点了！这是why？删除一个就失去焦点了！ 代码 const desc = h('span', { style: { margin: '0 10px' }, }, "至"); const maxDistance = h('Input', { props: { type:'text', value: params.row.maxDistan
iview Input 输入一个字符就主动失焦问题的解决
qq_43778935的博客
07-22 1640
问题： 今天在使用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}}&
vue input每次输入一个字符后自动失去焦点 问题
yongyafang123的博客
05-06 3525
问题： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，一个列表组件，每个对象中都有一个input输入框。 <div class="addTags" v-for="(item,index) in list" :key="item.title"> <input type="text" v-model="item.title"> </div> 原因 问题在于:key=‘item.title’，input数据也通过v-model="i
vue 动态添加的input框 输入一个字符之后会失去焦点
weixin_41919953的博客
12-13 2861
直接使用上层循环的item值作为当前循环对象，导致双向绑定的值会改变data里的值，每一次改变之后会更新table的视图，每一次输入之后input框都会失去焦点 改成直接循环data里的数组的值，数据初始渲染没有问题，输入框绑定的值也没有问题，并且不会更新table视图 ...
Vue中使用v-for循环input失去焦点问题
Jensonhui's Blog
03-22 2095
Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）
vue中使用iview自定义验证关键词输入框问题及解决方法
12-02
我们需要为关键词输入框的 `FormItem` 添加一个 `prop` 属性，这个属性将作为验证字段的标识。 2. **使用 `rules` 配置验证**：在 `Form` 组件中，可以通过 `rules` 属性定义验证规则。iView 提供了一些内置的验证...
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” />...或者绑定到data里边的一个字符串，也是可以解决
Vue实现input宽度随文字长度自适应操作
10-15
本文主要介绍如何利用Vue框架实现一个input输入框，让其宽度能够随着用户输入的文字长度动态调整，以适应不同长度的输入内容。 在日常的前端开发过程中，我们经常会遇到需要根据输入内容自动调整宽度的场景，以提升...
【踩坑日记】解决antd vue input每输入一个字符就失去焦点
LadenxxxxD
03-26 4951
今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。 结论 检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。 思路 这种情况首先考虑是组件变化重新渲染的问题。 验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。 检查key值，果然： ...
vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
yuan_618859的博客
05-06 8561
vue input每次输入一个字符后自动失去焦点 代码如下，遇到的问题就是： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题 <div class="addTags" v-for="(item,index) in...
vue elementUI el-input每次输入一个字符后自动失去焦点
weixin_42303960的博客
10-29 8242
vue elementUI el-input每次输入一个字符后自动失去焦点 input输入框每次输入一次就失去焦点，由于第一次开发后台管理系统 最开始以为是autocomplete的原因，很快发现不是，后来发现是因为v-for绑定的key值原因 v-for="(item,index) in signUpFormProps" :key="item.value+index" 显然每次输入改变了item.value的值导致其进行了渲染，将item.value值去掉后问题就解决了 ...
element form循环表单输入一次失去焦点
qq_40896095的博客
09-03 672
今天是这个星期的最后一天，记录一下简单问题 官网上有这样一个例子 然而造成出现这种情况的就是key,不能够取domains中的值， 这个时候也不能直接删除，就是保留index就可以，保证key值 本文连接：点击 博主个人小博客：嘿嘿 ...
vue input输入框失去焦点
qq_41994916的博客
11-11 1752
vue input输入框失去焦点 做项目时用了v-for指令动态生成几个input输入框，当我往输入框内输入内容时发现，每当我输入一个字符，input框就失去了焦点，令人头秃，一通百度后，终于找到原因。问题出在v-bind:key=“item.deptPhone”，input框输入值后会导致key也跟着变动，key的变动直接导致<el-form-item>被替换而不是更新，替换后的<el-form-item>被重新渲染，焦点自然就没有了。 ...
input失去焦点事件和点击事件冲突的解决思路
weixin_43333600的博客
02-14 3454
input失去焦点事件和点击事件冲突，注意mouseleave 事件不支持冒泡 。 mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout
vue的input事件与点击事件冲突，先失焦点
duruo0的博客
03-22 2616
在开发app时，自己做了个搜索筛选，结果每次输入字符后，想在回显的列表中选数据时遇到了问题，点第一次没反应，得点击第二次才会触发事件。打印发现在第一次点击事件时，只触发了input的blur事件，第二次才会触发点击事件，遂解决问题。，将按钮click事件替换为 mousedown 事件，优先于blur事件执行，最终实现了正确效果，感恩！搜索发现，是因为input中blur失去焦点事件与点击事件冲突，参考。
angular6 数组遍历项进行双向绑定 丢失焦点 问题解决
Altaba的博客
11-14 2659
欢迎来到Altaba的博客 学习angular6，漫长并充实的过程，今日发现一个问题 数组['aaa','bbb','ccc']遍历后，每个项都和input进行双向绑定，为什么改变input值，这个数组 里面的项（值变量）不改变；如果是[{a:'aaa'},{b:'bbb'},{c:'ccc'}],这样的项（引用型变量） 遍历后每个项进行双向绑定就可以实现表单改变项的值，数组也改变 办法总比困难...
【Vue实践】Vue中Input框失焦事件无效问题解决
lynnhgwang的博客
07-06 9305
记录在做项目中遇到的以西Input输入框失焦事件无效问题及解决思路 文章目录问题场景演示代码片段问题简单描述解决思路问题出现的原因分析解决办法两种解决思路1.定时器 setTimeout()2.nextTick()效果演示源码参考 问题 场景演示 代码片段 <div class="flex items-center"> <span>昵称：</span> <span v-if="isEditName" cl.
Vue Input 失去焦点 @blur事件 & 获得焦点 ref
热门推荐
weixin_44666116的博客
10-15 1万+
一、失去焦点 demo 1 关键 @blur <input v-model="testVal" @blur="test"></Input> methods: { test(){ console.log('testVal------------- ',testVal) } } 第二种 关键 @blur.native.capture <input v-model="testVal" @blur.native.capture="test">&
vue input每次输入一个字符后自动失去焦点
小草莓的博客
01-13 4664
遇到的问题就是，在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：输入框是数组遍历出来的，每次点击新增按钮，就会新增数组元素。
Vue+iview打造智能输入框 控制位数与键盘切换
资源摘要信息:"基于Vue框架和iView UI组件库实现了一个可输入零件号、银行卡号等特定格式数据的表单系统。在该系统中，input输入框可动态控制输入位数，用户在输入时能够进行键盘左右切换操作，以此来提高数据输入的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值