uniapp编译到微信后,v-for遍历列表点击效果和h5/app端的不一样(h5和app端正常,小程序端异常)
<template>
<view v-for="item in list" :key="item.id">
<view @click="selectClick(item)">
{{ item.name }}
</view>
</view>
</template>
<script>
export default {
data(){
return{
list: [
{
id: 1,
code: '01',
name: '测试1'
},
{
id: 2,
code: '02',
name: '测试2'
},
{
id: 3,
code: '03',
name: '测试3'
}
]
}
},
methods: {
selectClick(item) {
console.log(item) // 小程序这边打印是undefined
},
}
}
</script>
解决方案:
【方法1】:把key绑定为index
<view v-for="(item,index) in list" :key="index">
<view @click="selectClick(item)">
{{ item.name }}
</view>
</view>
【方法2】:把事件改成箭头函数
<view v-for="(item,index) in list" :key="item.id">
<view @click="() => selectClick(item)">
{{ item.name }}
</view>
</view>