首页 > 其他分享 >vue input每次输入一个字符后自动失去焦点 问题

vue input每次输入一个字符后自动失去焦点 问题

时间:2023-04-17 09:22:23浏览次数:42  
标签:字符 vue title 焦点 输入框 key input 输入

我在输入框输入的时候,每输入一次,输入框就自动失去焦点了。
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="item.title"绑定了,当修改了input数据时,:key的数据也跟着变了,因此页面key所在的元素进行重新渲染,因此焦点会消失。

解决办法
更改:key的绑定值
————————————————
版权声明:本文为CSDN博主「小雍雍」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/yongyafang123/article/details/124613716

标签:字符,vue,title,焦点,输入框,key,input,输入
From: https://www.cnblogs.com/luzanzan/p/17324745.html

相关文章

  • 在Vue中,关于require与required
    在Vue里面,是用require还是required?始终拿捏不定,所以这里记录一下图片是require('@/xxx')props里面是required表单验证里面是required总结:只有图片是require,其它都是required......
  • vue 项目npm run dev(启动)时报错The service was stopped
    vue项目yarnupgrade后vitebuild报错,如何项目也运行不起来了。报错截图:解决办法:删除node_modules文件夹,然后执行yarninstall重新生成心的node_modules。......
  • 复选框数据通过axios和Vue传输到servlet后台
    引言本来是想百度一下如何将table标签里面嵌入的复选框通过axios以及Vue传输到Servlet后台;百度之后才发现,是我草率了,原来可以直接用复选框标签进行传输(好吧,又暴露了自己基础不扎实的事实......)相关实现步骤1、将相关的标签el-checkbox引入进去这里我们需要引入三个带有el的标......
  • 字符串操作
    双引号spam="ThatisAlice'scat."字符串可以用双引号开始和结束,就像用单引号一样。使用双引号的好处就是字符串中可以使用单引号字符,如以上操作。 转义字符spam="SayhitoBob\'smother">>>spam"SayhitoBob'smother"常见的转义字符:转义字符......
  • 字符串转换整数 (atoi)
    题目描述难度中等请你来实现一个myAtoi(strings)函数,使其能将字符串转换成一个32位有符号整数(类似C/C++中的atoi函数)。函数myAtoi(strings)的算法如下:读入字符串并丢弃无用的前导空格检查下一个字符(假设还未到字符末尾)为正还是负号,读取该字符(如果有)。确定最终......
  • Linux驱动入门-最简单字符设备驱动(基于pc ubuntu)
    原文:https://blog.csdn.net/XiaoXiaoPengBo/article/details/128505550一.字符设备驱动概念字符设备是Linux驱动中最基本的一类设备驱动,字符设备就是一个一个字节,按照字节流进行读写操作的设备,读写数据是分先后顺序的。比如我们最常见的点灯、按键、IIC、SPI,LCD等等都是字符......
  • vue2源码-六、根据render函数生成vnode
    根据render函数生成vnode上文介绍上面已经将模板编译成了render函数,下面就要使用render函数,从而完成渲染的操作:首先,根据render函数生成虚拟节点;然后根据虚拟节点+真实数据生成真实节点。实现mountComponent方法,完成渲染虚拟节点生成封装vm._render方法。Vue.proto......
  • vue按钮禁用
    一个按钮的动态禁用设置是如此多坑必须要用到prop、dataprop来绑定其属性disabled,data是因为prop属性的内容不可改变。<template><div><el-buttontype="success"size="small"@click="check">龟龟</el-button><el-buttontype="success&q......
  • 前端学习笔记——Vue3组件间数值传递
    依据个人的学习需求,对Vue官网中组件部分内容的搬运和总结,可用于参看,想详细了解Vue3这部分特性的可以直接参考官网内容:https://cn.vuejs.orgprops是一种特别的attributes,我们可以在组件上生命注册。比如:如果我们要传递给博客文章组建一个标题的话,我们则必须在该组件的props列表......
  • vue-devtool
    vue-devtool是使用vue必不可少的一个工具,他可以让你在开发vue项目的时候,实时展示页面上的变量。1、下载到github下载:https://github.com/vuejs/devtools可使用git或者直接下载zip包安装依赖,最好使用yarn,因为该项目使用yarn这一步会比较久,需要耐心等待,预计等待10分钟到1个......