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>
附件

项目信息
| 项目信息 | 值 |
|---|---|
| 产品分类 | 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 对象。
解决方案:
- 使用事件对象传递参数(推荐):
<view class="spacing-col" [@click](/user/click)="likeArticle" :data-id="data._id">
likeArticle(e) {
const id = e.currentTarget.dataset.id;
// 使用id执行后续逻辑
}
- 在模板中绑定数据到组件属性:
<view class="spacing-col" [@click](/user/click)="likeArticle(data._id)">

