当前位置: 首页 > news >正文

el-input 输入后失去焦点

说了是无情,写了更无情,你说你看了不点赞是不是更绝情?遇到这种神奇的BUG,也是大家无奈的神情。

来分析看代码:

<div class="card-item input-item" :class="{ 'w-100': followRadio === '2' }"v-for="(item,index) in  stageRounds " :key="item.name"><template v-if="!item.hidden"><el-input v-if="followRadio === '1'" class="w-100"v-model="item.name"></el-input><el-input v-else class="w-100 big-w" v-model="item.roundName"placeholder="请填写随访点名称"></el-input></template>
</div>

外面的v-for循环的key使用了元素的name属性,而恰好我们的name动态双向绑定给了input,故而在

input输入变化时触发了外层的刷新导致每输入一个字符后input失去焦点,影响输入。

修改方案如下:将:key赋值一个不变的值!避免动态刷新此dom!

 <div class="card-item input-item" :class="{ 'w-100': followRadio === '2' }"v-for="(item,index) in  stageRounds " :key="index"><template v-if="!item.hidden"><el-input v-if="followRadio === '1'" class="w-100"v-model="item.name"></el-input><el-input v-else class="w-100 big-w" v-model="item.roundName"placeholder="请填写随访点名称"></el-input></template>
</div>

http://www.lryc.cn/news/224661.html

相关文章:

  • docker创建并访问本地前端
  • 数据结构之单链表基本操作
  • Python 实践
  • 使用easyui前端框架快速构建一个crud应用
  • Logback从添加依赖,到配置给中打印级别,archive相关信息配置,在项目中的常见的用法,一个完整的过程
  • 虚假内容检测,谣言检测,不实信息检测,事实核查;纯文本,多模态,多语言;数据集整理
  • 数据结构:单链表
  • 官媒代运营:让大众倾听品牌的声音
  • postgresql 实现计算日期间隔排除周末节假日方案
  • 金融工作怎么做?低代码如何助力金融行业
  • 基于springboot实现智慧外贸平台系统【项目源码+论文说明】计算机毕业设计
  • 带头+双向+循环链表
  • Leetcode_2:两数相加
  • Pytorch实战教程(一)-神经网络与模型训练
  • 【MySQL】手把手教你centos7下载MySQL
  • openlayers
  • 力扣每日一道系列 --- LeetCode 88. 合并两个有序数组
  • Android Studio(项目收获)
  • MQ写满的情况如何处理?
  • 点名(缺失的数字),剑指offer,力扣
  • 云安全—Dashboard 攻击面
  • FCOS难点记录
  • java通过FTP跨服务器动态监听读取指定目录下文件数据
  • 5G边缘计算网关的功能及作用
  • 阿里云AIGC小说生成【必得京东卡】
  • 数据结构之AVL树
  • 如何用Java实现一个基于机器学习的情感分析系统,用于分析文本中的情感倾向
  • 开发聚合支付的的意义
  • ChatGPT生产力|中科院学术ChatGPT优化配置
  • 语音播报speechSynthesis最简单的例子(亲测有用)