uni-app 小程序环境中用v-for渲染的元素 绑定click事件的传参存在bug

uni-app 小程序环境中用v-for渲染的元素 绑定click事件的传参存在bug

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<!-- #ifdef MP-WEIXIN -->  
<swiper class="swiper full" indicator-dots="true" interval="3000" duration="500" >  
    <swiper-item v-for="count in (cardList.length / 8)" :key="count" class="box full" >  
        <view class="card box" v-for="(card, index) in cardList.slice(count*8, (count+1)*8)" :key="index" @tap="toMenu(card)">  
            {{card.menuName}}  
        </view>  
    </swiper-item>  
</swiper>  
<!-- #endif -->  

toMenu(card){
    console.log(card);
}

操作步骤：

把代码跑起来，点击元素就行

预期结果：

{
menuName: "当日挂号",
path: "/pages/comm/quryOtpHosp"
},

实际结果：

VM1588 WAService.js:2 TypeError: Cannot read property '0' of undefined
at vendor.js? [sm]:1033
at Array.forEach (<anonymous>)
at getExtraValue (vendor.js? [sm]:1010)
at vendor.js? [sm]:1091
at Array.forEach (<anonymous>)
at processEventExtra (vendor.js? [sm]:1071)
at processEventArgs (vendor.js? [sm]:1122)
at vendor.js? [sm]:1230
at Array.forEach (<anonymous>)
at vendor.js? [sm]:1201
errorReport @ VM1588 WAService.js:2
thirdErrorReport @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
n.safeCallback @ VM1588 WAService.js:2
n.call @ VM1588 WAService.js:2
message @ VM1588 WAService.js:2
n.safeCallback @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
a @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
n @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
(anonymous) @ VM1588 WAService.js:2
i @ VM8 asdebug.js:1
c @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
f @ VM8 asdebug.js:1
g @ VM8 asdebug.js:1
(anonymous) @ VM8 asdebug.js:1
_ws.onmessage @ VM8 asdebug.js:1

bug描述：

小程序环境中用v-for渲染的元素，绑定click事件的传参存在bug


更多关于uni-app 小程序环境中用v-for渲染的元素 绑定click事件的传参存在bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 小程序环境中用v-for渲染的元素 绑定click事件的传参存在bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也出现了这种情况，点击的时候提示这个错误，不带参数就没有问题

这是一个已知的小程序平台事件处理机制问题。在小程序环境中，事件参数传递时会对数据进行序列化处理，导致复杂对象在事件回调中丢失。

建议修改事件绑定方式：

<view 
  class="card box" 
  v-for="(card, index) in cardList.slice(count*8, (count+1)*8)" 
  :key="index" 
  @tap="toMenu(index, count)"
  :data-card="card">
  {{card.menuName}}
</view>

toMenu(index, count){
    const startIndex = count * 8
    const actualIndex = startIndex + index
    const card = this.cardList[actualIndex]
    console.log(card)
}

或者使用数据索引直接获取：

toMenu(index, count){
    const card = this.cardList.slice(count*8, (count+1)*8)[index]
    console.log(card)
}
回到顶部