<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"
group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in options" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
udb1.value.loadData({
clear: true})
- 发布:2024-01-02 10:55
- 更新:2024-01-12 13:20
- 阅读:257
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15
HBuilderX类型: 正式
HBuilderX版本号: 3.99
第三方开发者工具版本号: 1.06
基础库版本号: 3.2.4
项目创建方式: HBuilderX
示例代码:
操作步骤:
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"
group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in options" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
udb1.value.loadData({
clear: true})
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"
group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in options" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
udb1.value.loadData({
clear: true})
预期结果:
重新加载数据
重新加载数据
实际结果:
没有更新数据
没有更新数据
bug描述:
【报Bug】unicloud-db组件嵌套,里层db数据loadData()不更新
冬天的太阳 (作者) - 一个xx的90后
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"
group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in options" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
:where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`"
orderby="pay_date">
<!-- 每日消费详细 -->
<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom"
v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 100}}</text>
</view>
<!-- 每日消费明细结束 -->
</unicloud-db>
</view>
</view>
<!-- 循环日期结束 -->
</unicloud-db>
<script setup>
onShow(() => {
udb.value.loadData({
clear: true
})
udb1.value.loadData({
clear: true
})
})
</script>
组件的默认属性 loadtime 为自动加载数据,加载过程中再次调用 loadData 会被忽略,应设为手动模式,然后在调用 loadData
<unicloud-db loadtime="manual">
文档 https://doc.dcloud.net.cn/uniCloud/unicloud-db.html#props
可以简化这个逻辑,在 父的 v-for 中 使用 v-if 创建子 <unicloud-db v-if="data">
,且开启自动加载数据
-
冬天的太阳 (作者)
父 loadtime="manual" 子 loadtime="auto"。onReady和onShow中
udb.value.loadData({clear:true})
,,添加数据后返回页面,父组件数据可以正常更新,但是子组件数据没有更新。(父子组件都loadtime="auto",父子数据都不更新)2024-01-05 15:26
冬天的太阳 (作者) - 一个xx的90后
如果添加一条时间2024-1-5 买衣服 10元的数据,添加数据后返回页面,这条数据不会更新在页面上。 如果添加一条2024-1-3 买鞋 10元的数据,添加后返回页面就能在页面显示出来。请问这是udb组件在嵌套中有什么bug吗
冬天的太阳 (作者) - 一个xx的90后
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && openid == '${userInfo.openid}' && is_remove == 0`"
groupby="pay_date" group-field="sum(pay_num) as payDaySum" orderby="pay_date desc" loadtime="manual">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in data" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db v-if="data" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
:where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`"
orderby="pay_date" loadtime="auto">
<!-- 每日消费详细 -->
<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom"
v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 100}}</text>
</view>
<!-- 每日消费明细结束 -->
</unicloud-db>
</view>
</view>
<!-- 循环日期结束 -->
</unicloud-db>
重新梳理下流程:
- 子组件需要在页面创建后才能调用 loadData 方法,例如: 写了 v-if 因为父没有数据导致子没有被创建
- 可以在父的
@load
事件中手动调用 子<unicloud-db>
的 loadData 方法加载数据
冬天的太阳 (作者) - 一个xx的90后
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="pay"
:where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"
group-field="sum(pay_num) as payDaySum" orderby="pay_date desc" loadtime="manual" @load="udbLoad">
<!-- 循环日期 -->
<view class="detail-list" v-for="(item,index) in data" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 1000}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-if="data.length > 0" v-slot:default="{data, loading, error, options}"
collection="pay, pay-type"
:where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`"
orderby="pay_date" loadtime="manual">
<!-- 每日消费详细 -->
<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom"
v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 1000}}</text>
</view>
<!-- 每日消费明细结束 -->
</unicloud-db>
</view>
</view>
<!-- 循环日期结束 -->
</unicloud-db>
// 重新加载数据
function udbloadData() {
udb.value.loadData({
clear: true
})
udbSum.value.loadData({
clear: true
})
udbLoad()
}
function udbLoad() {
console.log(udb1)
udb1.value.loadData({
clear: true
})
}
onReady(() => {
udbloadData()
})
onShow(() => {
udbloadData()
})
冬天的太阳 (作者)
已提供
2024-01-02 11:46