• el-input 输入后失去焦点


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

    来分析看代码:

    1. class="card-item input-item" :class="{ 'w-100': followRadio === '2' }"
    2. v-for="(item,index) in stageRounds " :key="item.name">
    3. <template v-if="!item.hidden">
    4. <el-input v-if="followRadio === '1'" class="w-100"
    5. v-model="item.name">el-input>
    6. <el-input v-else class="w-100 big-w" v-model="item.roundName"
    7. placeholder="请填写随访点名称">el-input>
    8. template>
  • 外面的v-for循环的key使用了元素的name属性,而恰好我们的name动态双向绑定给了input,故而在

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

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

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

  • 相关阅读:
    java中如何让1+1=3
    项目申请理论理解---2022.8月
    VUE DPlayer编译
    Leetcode1106:解析布尔表达式
    JSP 图书管理系统myeclipse开发mysql数据库MVC模式java编程网页设计
    xilinx reset,data同步
    搭建vue3.2+vite+ts+pinia项目
    Lua脚本实现setnx命令
    css伪类元素使用技巧 表达input父级聚焦css实现
    【Unity小技巧】如何在 Unity 中使用我们的Cinemachine虚拟相机跟踪多个目标
  • 原文地址:https://blog.csdn.net/yunhuaikong/article/details/134262036