vue 动态添加的input框 输入一个字符之后会失去焦点

最新推荐文章于 2023-05-08 11:14:17 发布
最新推荐文章于 2023-05-08 11:14:17 发布
阅读量2.7k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41919953/article/details/103530085
版权

原写法
直接使用上层循环的item值作为当前循环对象，导致双向绑定的值会改变data里的值，每一次改变之后会更新table的视图，每一次输入之后input框都会失去焦点

改成直接循环data里的数组的值，数据初始渲染没有问题，输入框绑定的值也没有问题，并且不会更新table视图
修改后

好大一个川
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-pincode-input-智能密码输入组件-Vue.js开发
05-27
GitHub Pages上的演示功能可配置的长度（符号数）覆盖友好样式填充时的自动移动焦点删除自动选择单元格内容时的自动移动焦点在移动电话上对本机数字键盘进行聚焦调用时自动选择焦点可选的安全模式（密码输入类型）在...
vue 清空input标签 中file的值操作
11-20
这里，我们创建了一个`<input type="file">`标签，并添加了`ref="pathClear"`属性以便于在Vue组件的方法中引用它。同时，`@change="onUpload"`监听文件选择事件，当用户选择文件时会触发`onUpload`方法。 在Vue组件...
react 动态渲染的输入框每输入一次都会失去焦点
m0_56325569的博客
05-08 680
来缓存函数，避免在每次渲染时重新创建函数，从而导致组件失去焦点。来缓存数据，避免在每次渲染时重新计算数据。
vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
yuan_618859的博客
05-06 7851
vue input每次输入一个字符后自动失去焦点 代码如下，遇到的问题就是： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题 <div class="addTags" v-for="(item,index) in...
iview的input输入框输入一个字符就失去焦点
weixin_44046781的博客
11-23 643
一般是使用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这种做k
vue input每次输入一个字符后自动失去焦点 问题
yongyafang123的博客
05-06 3279
问题： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 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
input 每输入一次都会失去焦点需要再次点击
weixin_44542836的博客
01-16 5459
commenList.map(item =&gt; { // console.log('comment', item); return (&lt;div key={new Date().getTime()}&gt; &lt;ExampleComment comment={item} ...
使用focus方法让光标默认停留在INPUT框
09-04
此外，如果你有多个`<input>`元素，而只想让其中一个获得焦点，那么确保ID是唯一的，并且正确地引用了这个ID。 为了提高可维护性和代码结构，你也可以将JavaScript代码从HTML中分离出来，放在外部的`.js`文件或`...
vue 验证两次输入的密码是否一致的方法示例
10-14
以下是一个简单的Vue组件模板： ```html 新密码" prop="newPwd"> <el-input v-model="ruleForm.newPwd" clearable size="small" type="password"></el-input> 确认密码" prop="confirmPwd"> <el-input v-...
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
在Vue和ElementUI框架下，实现输入框(input)只能输入正整数的需求，可以通过多种方式来达成。这里介绍四种不同的方法： ### 方法一：利用禁止按键的方法 此方法通过监听`keyup`事件来阻止用户输入非正整数的字符。...
vue elementUI el-input每次输入一个字符后自动失去焦点
weixin_42303960的博客
10-29 7405
vue elementUI el-input每次输入一个字符后自动失去焦点 input输入框每次输入一次就失去焦点，由于第一次开发后台管理系统 最开始以为是autocomplete的原因，很快发现不是，后来发现是因为v-for绑定的key值原因 v-for="(item,index) in signUpFormProps" :key="item.value+index" 显然每次输入改变了item.value的值导致其进行了渲染，将item.value值去掉后问题就解决了 ...
elementUi中input输入字符光标在输入一个字符后，光标失去焦点
weixin_30300523的博客
04-20 5381
elementUi中input输入字符光标在输入一个字符后，光标就退出，无法输入需要再次聚焦然后输入一个字符又再次退出 首先，用elementUi正常用v-model绑定输入的值是不会造成光标退出的，原因是用了局部作用域插槽，导致光标输入，table下的数据刷新， 导致table重绘，光标失去焦点 解决办法是table绑定一个初始化的模拟数据，，插槽内绑定页面渲染的数据，当输入框数据变化...
【踩坑日记】解决antd vue input每输入一个字符就失去焦点
LadenxxxxD
03-26 4514
今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。 结论 检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。 思路 这种情况首先考虑是组件变化重新渲染的问题。 验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。 检查key值，果然： ...
vue-table列中嵌套input和select时，输入时失去焦点
南有乔木的博客
01-15 5071
table定义： &lt;Table height="385" border :columns="fieldDetailColumns1" :data="fieldDetailList1" &gt;&lt;/Table&gt; data中写上： data() { let t = this; return { fieldDetailList1: [], ...
vue input每次输入一个字符后自动失去焦点
qq_42075072的博客
07-11 1586
vue input每次输入一个字符后自动失去焦点
vue input输入框失去焦点
qq_41994916的博客
11-11 1582
vue input输入框失去焦点 做项目时用了v-for指令动态生成几个input输入框，当我往输入框内输入内容时发现，每当我输入一个字符，input框就失去了焦点，令人头秃，一通百度后，终于找到原因。问题出在v-bind:key=“item.deptPhone”，input框输入值后会导致key也跟着变动，key的变动直接导致<el-form-item>被替换而不是更新，替换后的<el-form-item>被重新渲染，焦点自然就没有了。 ...
vue动态生成的表格中其中一列嵌套表单出现改变一列的el-input输入框时所有的el-input中的值都会改变的解决方法
qq_37669507的博客
08-07 2356
在el-form外加上一层 <template slot-scope="scope"> <div> slot-scope="scope"是重点,这是作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法 在el-input的v-model中使用scope.row.xxx来绑定v-model 这是因为在这里使用ElementUI表格模板渲染数据时,当前行数据的获取也会用到插槽,scope相当于一行的数据， scope.row相当于当前行的
vue中弹窗input框聚焦_vue input 输入框聚焦
weixin_28725959的博客
01-13 1103
最近在用element ，需求是 在表格里嵌套输入框：点击之前.jpg点击显示：点击之后显示输入框.jpg失焦隐藏：失焦隐藏.jpg有个问题，就是输入框显示后不会自动focus，这就会导致输入框显示之后在点击别处不会自动隐藏，因为不会触发blur事件，要解决这一问题只能在显示输入框是就触发focus，于是百度，感谢 https://www.jianshu.com/p/8b9d65096566 这篇...
解决antd/antd-mobile等input输入后自动失焦的问题
leisurefavor的专栏
12-31 2350
这个问题主要发生在render该组件时存在 if 判断 或者switch 判断的情况下，数据变更后引起组件重新render，导致input也被重新渲染，肯定会自动失焦，解决办法也很简单，把input部分抽离出来单独封装成一个小组件，组件内部数据变动不引发外部父组件重新render，就可以解决自动失焦的问题 ...
vue input框里面如何获取到数组里面的第一个对象的数据
最新发布
05-31
如果你想在 Vue 的模板中获取数组中第一个对象的数据并显示在输入框中，可以使用 `v-model` 指令来实现双向数据绑定。具体方法是将输入框的 `v-model` 绑定到第一个对象的某个属性上。 下面是一个示例代码： ```html <template> <div> <input type="text" v-model="firstName" /> </div> </template> <script> export default { data() { return { items: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, ], }; }, computed: { firstName() { // 获取第一个对象的 name 属性值 return this.items.length > 0 ? this.items[0].name : ''; }, }, }; </script> ``` 在上面的代码中，我们使用 `v-model` 指令将输入框绑定到 `firstName` 计算属性上。计算属性会根据数组中第一个对象的数据来计算出输入框的初始值，并且当输入框的值发生变化时也会更新第一个对象的数据。 需要注意的是，我们使用了一个条件表达式来判断数组是否为空，如果为空则返回一个空字符串。这是为了避免当数组为空时出现错误。 如果你想要修改第一个对象的数据，可以在输入框中输入新的值并按下回车键或失去焦点，然后在计算属性中更新第一个对象的属性值。这里我们只更新了 `name` 属性，你也可以根据需要修改其他属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值