在微信小程序中会有这个问题,h5正常
在 v-for数组列表 同时 :key 值没有用下标设置,而是用其它设置 ,会导致 动态添加数组内容 ,点击列表 获取的 列表下标 错误
重现步骤
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="add">
<button @tap="toAddData">添加数组数据</button>
</view>
<view v-for="(item,k) in arra" :key="item.key" :item="item" @tap="getIndex(k)">
{{item.value}}
</view>
</view>
</template>
<script>
export default {
components: {
bb
},
data() {
return {
title: 'Hello',
arra: [{
value: 132,
key: Math.random() * 1000
}, {
value: 234,
key: Math.random() * 1000
}, {
value: 456,
key: Math.random() * 1000
}, {
value: 789,
key: Math.random() * 1000
}, {
value: 567,
key: Math.random() * 1000
}]
}
},
methods: {
toAddData() {
this.arra.unshift({
value: 132,
key: Math.random() * 1000
})
},
getIndex(k) {
console.log(k)
}
}
}
</script>
[结果]
点击 添加数据后,获取列表的下标 ,下标错误
[期望]
恢复正常
[IDE版本号] 2.2.5alpha
2***@qq.com
问题解决没有 我的index也是显示和点击后传的不一致 最后还是循环id改变的
2021-03-02 11:08