<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>
- 发布:2022-12-09 11:15
- 更新:2022-12-09 19:37
- 阅读:244
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.6.5
第三方开发者工具版本号: 1.0.6.2210310win32-x64
基础库版本号: 2.28.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
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才对
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要改为1
实际结果:
旧的第一项item,它index没改变,跟unshift插入的item的index重复了,都为0
旧的第一项item,它index没改变,跟unshift插入的item的index重复了,都为0
bug描述:
v-for,key绑定id,渲染出来 => 手动点击button,unshift插入元素到数组 => 此时旧的第一项item的index还是0(期待是1)
1 个回复
DCloud_UNI_WZF
使用id 或者传入两个参数, 比如: @click="clickTest(index,item.id)"