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组件...
vue input每次输入一个字符后自动失去焦点 问题
yongyafang123的博客
05-06 3285
问题： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 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 elementUI el-input每次输入一个字符后自动失去焦点
weixin_42303960的博客
10-29 7445
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 5387
elementUi中input输入字符光标在输入一个字符后，光标就退出，无法输入需要再次聚焦然后输入一个字符又再次退出 首先，用elementUi正常用v-model绑定输入的值是不会造成光标退出的，原因是用了局部作用域插槽，导致光标输入，table下的数据刷新， 导致table重绘，光标失去焦点 解决办法是table绑定一个初始化的模拟数据，，插槽内绑定页面渲染的数据，当输入框数据变化...
vue for 循环生成el-input 修改某一个input导致所有都变化的情况
weixin_44092085的博客
09-11 9270
遇到的问题： 1 el-input 用@change不管用，用的input 2 如果用一个变量来控制，会出现修改一个input，其他同时变化的情况 所以，我直接对获得的数组操作，直接给list添加一个 label属性，当修改一个input之后，去调用changeMoney接口，去刷新界面 changeMoney方法： 这样就可以保证修改某一个 ...
vue input每次输入一个字符后自动失去焦点
qq_42075072的博客
07-11 1593
vue input每次输入一个字符后自动失去焦点
使用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`事件来阻止用户输入非正整数的字符。...
【踩坑日记】解决antd vue input每输入一个字符就失去焦点
LadenxxxxD
03-26 4521
今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。 结论 检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。 思路 这种情况首先考虑是组件变化重新渲染的问题。 验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。 检查key值，果然： ...
vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
yuan_618859的博客
05-06 7882
vue input每次输入一个字符后自动失去焦点 代码如下，遇到的问题就是： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题 <div class="addTags" v-for="(item,index) in...
react 动态渲染的输入框每输入一次都会失去焦点
m0_56325569的博客
05-08 684
来缓存函数，避免在每次渲染时重新创建函数，从而导致组件失去焦点。来缓存数据，避免在每次渲染时重新计算数据。
iview的input输入框输入一个字符就失去焦点
weixin_44046781的博客
11-23 646
一般是使用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动态生成的表格中其中一列嵌套表单出现改变一列的el-input输入框时所有的el-input中的值都会改变的解决方法
qq_37669507的博客
08-07 2362
在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框修改时页面数值随之改变的bug
前端职场小白_炜晨科技的博客
08-18 925
点击click按钮时数值随之改变的bug,改变数值(例如input框中的文字),页面也会随之改变,因为v-model双向绑定的原因。data中定义一个值,用深拷贝方法,将父组件中传过来的值,赋值给新值,dom层v-model的值也需改变result.name等等。...
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框里面如何获取到数组里面的第一个对象的数据
最新发布
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、付费专栏及课程。

余额充值