uni-app 【报Bug】view @click 事件传参无法取到unicloud-db查询的_id

uni-app 【报Bug】view @click 事件传参无法取到unicloud-db查询的_id

操作步骤:

<view class="spacing-col" [@click](/user/click)="likeArticle(data._id)">
<!-- 这里直接报错了,不会执行likeArticle,data是unicloud-db 查出来的数据_id 是表必须有的 -->
<uni-icons type="hand-thumbsup" size="14" color="#999"></uni-icons>
<text class="text-color-grey">点赞 {{data.like_count}}</text>
</view>

预期结果:

likeArticle(id){
//执行该方法
}

实际结果:

微信调试器

VM247 WAService.js:2 TypeError: Cannot read property '_id' of undefined
    at getTarget (vendor.js? [sm]:10400)
    at getTarget (vendor.js? [sm]:10402)
    at VueComponent.Vue.__get_value (vendor.js? [sm]:10505)
    at vendor.js? [sm]:1216
    at Array.forEach (<anonymous>)
    at processEventExtra (vendor.js? [sm]:1200)
    at processEventArgs (vendor.js? [sm]:1251)
    at vendor.js? [sm]:1359
    at Array.forEach (<anonymous>)
    at vendor.js? [sm]:1330(env: Windows,mp,1.05.2110290; lib: 2.20.2)

bug描述:

H5正常

小程序报错:view事件传参无法读取里unicloud-db 查出来的_id

问题代码

<view class="spacing-col" [@click](/user/click)="likeArticle(data._id)">
<!-- 这里直接报错了, -->
<uni-icons type="hand-thumbsup" size="14" color="#999"></uni-icons>
<text class="text-color-grey">点赞 {{data.like_count}}</text>
</view>

微信小程序 调试器报错

VM247 WAService.js:2 TypeError: Cannot read property '_id' of undefined
    at getTarget (vendor.js? [sm]:10400)
    at getTarget (vendor.js? [sm]:10402)
    at VueComponent.Vue.__get_value (vendor.js? [sm]:10505)
    at vendor.js? [sm]:1216
    at Array.forEach (<anonymous>)
    at processEventExtra (vendor.js? [sm]:1200)
    at processEventArgs (vendor.js? [sm]:1251)
    at vendor.js? [sm]:1359
    at Array.forEach (<anonymous>)
    at vendor.js? [sm]:1330(env: Windows,mp,1.05.2110290; lib: 2.20.2)

函数

likeArticle(id) {
    uniCloud.callFunction({
        name: 'article',
        data: {
            action: 'likeArticle',
            params: {
                id:id
            },
        }
    }).then((res) => {
        if (res.result.like) {
            uni.showToast({
                icon: 'none',
                title: '点赞成功'
            })
        } else {
            throw new Error(res.result.msg)
        }
    }).catch((err) => {
        uni.showModal({
            content: err.message || "点赞失败",
            showCancel: false
        })
    });
},

相关代码

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}"
    :options="options" collection="opendb-news-articles,opendb-news-categories"
    field="avatar,category_id{name},comment_status,content,last_modify_date,like_count,publish_date,title,origin,user_id,view_count"
    :where="queryWhere" :getone="true" :manual="true" @load="detailLoad"
    action="article-foreign-key,article-read">
    <view v-if="error">{{error.message}}</view>
    <view v-else-if="loading">
        <uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
    </view>
    <view v-else-if="data">
        <view>
            <view class="title spacing-row"><text selectable="true"
                    user-select="true">{{data.title}}</text>
            </view>
            <view class="text-color-grey">
                <text class="spacing-col" selectable="true"
                    user-select="true">{{data.origin?data.origin:data.user_id.length>0?data.user_id[0].nickname:""}}</text>
                <uni-dateformat selectable="true" user-select="true" class="spacing-col"
                    :threshold="[0, 0]"
                    :date="data.last_modify_date?data.last_modify_date:data.publish_date">
                </uni-dateformat>
                <text class="spacing-col text-color-placeholder"
                    [@click](/user/click)="searchCategory({id:data.category_id && data.category_id[0] && data.category_id[0]._id,name:data.category_id && data.category_id[0] && data.category_id[0].name})">{{data.category_id && data.category_id[0] && data.category_id[0].name||'无分类'}}</text>
            </view>
            <view class="tool-bar spacing-row">
                <view class="spacing-col">
                    <uni-icons type="eye" size="14" color="#999"></uni-icons>
                    <text class="text-color-grey">阅读 {{data.view_count}}</text>
                </view>
                <view class="spacing-col" [@click](/user/click)="likeArticle(data._id)">
                    <uni-icons type="hand-thumbsup" size="14" color="#999"></uni-icons>
                    <text class="text-color-grey">点赞 {{data.like_count}}</text>
                </view>
                <view class="spacing-col" v-if="data.comment_status" [@click](/user/click)="toComment">
                    <uni-icons type="chat" size="14" color="#999"></uni-icons>
                    <text class="text-color-grey">评论</text>
                </view>
            </view>
            <view>
                <!-- <image class="image" mode="widthFix" :src="data.avatar"></image> -->
                <image class="image" mode="widthFix" src="../../../static/bg-image.jpeg"></image>
            </view>
            <view class="spacing-row spacing-col">
                <u-parse :content="data.content?data.content:' '"></u-parse>
            </view>
            <view class="comment spacing-row" v-if="data.comment_status">
                <vvevn-comment :articleId="data._id"></vvevn-comment>
            </view>
        </view>
    </view>
</unicloud-db>

附件

Image

项目信息

项目信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 Alpha
HBuilderX版本号 3.2.13
第三方开发者工具 1.05.2110290
基础库版本号 2.20.2
项目创建方式 HBuilderX

更多关于uni-app 【报Bug】view @click 事件传参无法取到unicloud-db查询的_id的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

最后怎么解决的?data中的所有数据,通过事件好象传不出来

更多关于uni-app 【报Bug】view @click 事件传参无法取到unicloud-db查询的_id的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题解决了么?官方也没解释?

有一个取巧的办法, 通过@load事件,拿到返回数据, 然后赋值给data里的对象, 就能拿到了

这是一个典型的小程序端事件传参作用域问题。在微信小程序中,事件处理函数的作用域与H5不同,[@click](/user/click)="likeArticle(data._id)" 这种写法在小程序端无法正确获取到当前作用域的 data 对象。

解决方案:

  1. 使用事件对象传递参数(推荐):
<view class="spacing-col" [@click](/user/click)="likeArticle" :data-id="data._id">
likeArticle(e) {
    const id = e.currentTarget.dataset.id;
    // 使用id执行后续逻辑
}
  1. 在模板中绑定数据到组件属性
<view class="spacing-col" [@click](/user/click)="likeArticle(data._id)">
回到顶部