Vue中使用v-for循环input失去焦点问题

最新推荐文章于 2024-07-15 16:06:08 发布

葬我以时光

最新推荐文章于 2024-07-15 16:06:08 发布

阅读量1.9k

点赞数 2

分类专栏： Vue JS HTML 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Jone_hui/article/details/123662230

版权

Vue 同时被 3 个专栏收录

38 篇文章 2 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）；

出现问题原因，多半是因为循环列表Key，检查Key值是否唯一

解决方法：（保证唯一不重复，建议使用UUID）

// 错误示范
<ul
  v-for="(item, index) in relationList"
  :key="index"
  class="area-list-item"
>
    <li>{{ item }}</li>
</ul>





// 正确示范
<ul
  v-for="(item, index) in relationList"
  :key="serialNum(index)"
  class="area-list-item"
>
    <li>{{ item }}</li>
</ul>


functiono serialNum (index) {
    return Date.now() + Math.random().toString(36).substr(index) 
}