jameszhanc
jameszhanc
  • 发布:2022-12-09 11:15
  • 更新:2022-12-09 19:37
  • 阅读:244

【报Bug】v-for的key有问题(vue2 uniapp)

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.5

第三方开发者工具版本号: 1.0.6.2210310win32-x64

基础库版本号: 2.28.0

项目创建方式: HBuilderX

示例代码:
<template>  
  <view>  
    <button @click="changeTest">click</button>  
    <view v-for="(item,index) in testList" :key="item.id" @click.stop="clickTest(item.id)">{{item.name}}</view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      testList: []  
    }  
  },  
  mounted() {  
    var newList = [  
      {  
        id: 1,  
        name: 'a'  
      },  
      {  
        id: 2,  
        name: 'b'  
      },  
      {  
        id: 3,  
        name: 'c'  
      },  
    ]  
    this.$set(this, 'testList', newList)  
  },  
  methods: {  
    clickTest(id) {  
      console.log('id', id)  
    },  
    changeTest() {  
      var newList = [  
        {  
          id: 4,  
          name: 'd'  
        },  
        {  
          id: 1,  
          name: 'a'  
        },  
        {  
          id: 2,  
          name: 'b'  
        },  
        {  
          id: 3,  
          name: 'c'  
        },  
      ]  
      this.$set(this, 'testList', newList)  
    },  
  }  
}  
</script>  

<style>  
</style>

操作步骤:

v-for 【{id:1, name:'a'},{id:2, name:'b'},{id:3, name:'c'},】key绑定id =》 点击button,unshift插入{id:4, name:'d' } => 此时点击a,返回的index为0,希望是返回index为1才对

预期结果:

旧的第一项item,它的index要改为1

实际结果:

旧的第一项item,它index没改变,跟unshift插入的item的index重复了,都为0

bug描述:

v-for,key绑定id,渲染出来 => 手动点击button,unshift插入元素到数组 => 此时旧的第一项item的index还是0(期待是1)

2022-12-09 11:15 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

使用id 或者传入两个参数, 比如: @click="clickTest(index,item.id)"

该问题目前已经被锁定, 无法添加新回复