详细问题描述
v-for 中 :key 失效了
本来以为是我的代码问题 但是切换到老版本发现没有这个问题 于是就写了个demo重现问题
重现步骤
[步骤]
简单的搜索功能,搜索“李四”,然后点击“李四”条目,toast弹出“李四”。但是点击“李四”条目的时候 弹出的还是“张三”。
<template>
<view>
<input @input="search" v-model="searchWord" style="border: #007AFF solid 1rpx;" />
<view style="padding: 20rpx;" v-for="item in list" :key='item.id' @click="show(item.name)">{{item.id}}------{{item.name}}</view>
</view>
</template>
<script>
export default {
data() {
return {
searchWord: '',
list: [{
id: 1,
name: '张三'
}, {
id: 2,
name: '张三'
}, {
id: 3,
name: '张三'
}, {
id: 4,
name: '张三'
}, {
id: 5,
name: '张三'
}, {
id: 6,
name: '李四'
}, {
id: 7,
name: '张三'
}, {
id: 8,
name: '张三'
}, {
id: 9,
name: '张三'
}, {
id: 10,
name: '张三'
}, ]
}
},
methods: {
search() {
this.list = this.list.filter(item => {
return item.name.indexOf(this.searchWord) !== -1
})
},
show(name) {
uni.showToast({
title: name
})
}
}
}
</script>
<style>
</style>
第一张是随便点击一个“张三”,然后弹出“张三”
第二张输入“李四”,然后点击“李四”,弹出来的还是张三
个人觉得可能是 v-for 中:key没有起作用,虽然视图更新了,但是绑定事件中的数据没有变化。切换到2.4.6版本是没有问题的。
IDE运行环境说明
hbuilderX 2.5.10
[IDE版本号]
macos 10.15.2
uni-app运行环境说明
app端
项目通过hubilder 创建的uni-app应用
App运行环境说明
Android 10
华为V20
附件
联系方式
qq:1286318172