l***@163.com

发布：2023-07-05 18:19
更新：2023-07-06 11:03
阅读：193

【报Bug】view组件绑定click事件的参数未及时更新

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 10

HBuilderX类型：正式

HBuilderX版本号： 3.8.4

手机系统： Android

手机系统版本号： Android 9.0

手机厂商：模拟器

手机机型： ONEPLUS 10 PRO

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template v-for="item in list">  
            <uni-card spacing="0" padding="0">  
                <view class="card-body">  
                    <view class="card-body-title">  
                        <text>{{item.name}}</text>  
                    </view>  
                    <view class="card-body-subTitle">  
                        <text>{{item.date}}</text>  
                    </view>  
                    <view class="card-body-content">  
                        <text>  
                            <text class="card-body-content-days">{{item.date|calcDays}}</text><text>天后</text>  
                        </text>  
                    </view>  
                </view>  
                <view slot="actions" class="card-actions">  
                    <view class="card-actions-item" @click="openDialog(item)">  
                        <uni-icons type="info" color="#999" size="18"></uni-icons>  
                        <text class="card-actions-item-text">详情</text>  
                    </view>  
                    <view class="card-actions-item-line"></view>  
                    <view class="card-actions-item" @click="modifyItem(item)">  
                        <uni-icons type="compose" color="#999" size="18"></uni-icons>  
                        <text class="card-actions-item-text">修改</text>  
                    </view>  
                    <view class="card-actions-item-line"></view>  
                    <view class="card-actions-item">  
                        <uni-icons type="fire" color="#999" size="18"></uni-icons>  
                        <text class="card-actions-item-text">开始学习</text>  
                    </view>  
                </view>  
            </uni-card>  
        </template>

openDialog(item) {  
                this.currentItem = {  
                    ...item  
                }  
                this.$refs.alertDialog.open()  
            }

操作步骤：

~

预期结果：

传递的参数能够及时更新

实际结果：

未更新

bug描述：

场景：使用v-for遍历view组件时，给view绑定click事件，点击事件时带入参数item；
问题：更新遍历的数组后，视图有更新，但是触发点击事件时，带入的参数并没有更新为当前item；

如附件所示，视图中的card组件的title内容已经变更为 2221 ,但是点击卡片的 详情 时（由view编写），调用 openDialog 显示弹框，弹框的内容并没有更新

2023-07-05 18:19 负责人:无分享

3 个回复

爱豆豆 - 办法总比困难多

这种情况肯定是你写法有问题你提供个完整的demo出来

昭昭L - 开心就好

你把item直接传到this.$refs.alertDialog.open(item),弹窗组件的去肯定没问题

l***@163.com (作者)

已经找到问题，这是因为在循环中使用模板引用的方式，在编译阶段会生成相同的事件处理函数，因此无法实时更新传递的参数。

解决：

使用闭包函数：点击详情时，调用的openDialog函数重写如下;
openDialog(item){
const _this = this;
return function(){
_this.currentItem = {...item};
_this.$refs.alertDialog.open();
}
}
将问题中的dom提取为组件，由组件内部向父组件传递当前item

要回复问题请先登录或注册

【报Bug】view组件绑定click事件的参数未及时更新

操作步骤：

~

预期结果：

传递的参数能够及时更新

实际结果：

未更新

bug描述：

3 个回复

公告

相关问题

【报Bug】view组件绑定click事件的参数未及时更新

操作步骤： ~

预期结果： 传递的参数能够及时更新

实际结果： 未更新

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

操作步骤：

~

预期结果：

传递的参数能够及时更新

实际结果：

未更新