uni-app unicloud-db组件嵌套问题：里层db组件where依赖外层循环数据，里层db组件无法手动更新数据
uni-app unicloud-db组件嵌套问题：里层db组件where依赖外层循环数据，里层db组件无法手动更新数据
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 10.15 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.99 |
| 第三方开发者工具版本号 | 最新 |
| 基础库版本号 | 最新 |
| 项目创建方式 | HBuilderX |
产品分类：uniapp/小程序/微信
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：10.15
HBuilderX类型：正式
HBuilderX版本号：3.99
第三方开发者工具版本号：最新
基础库版本号：最新
项目创建方式：HBuilderX
### 示例代码：
```html
<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">
<!-- 循环日期 -->
<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 ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
:where="`pay_date == ${item.pay_date} && openid == '${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 / 100}}</text>
</view>
<!-- 每日消费明细结束 -->
</unicloud-db>
onReady() {
this.$refs.udb.loadData({clear: true})
this.$refs.udb1.loadData({clear: true})
console.log('udb - ' + this.$refs.udb)
console.log(this.$refs.udb1)
}
// 报错： udb1.value.loadData is not a function 操作步骤：
<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">
<!-- 循环日期 -->
<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 ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"
:where="`pay_date == ${item.pay_date} && openid == '${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 / 100}}</text>
</view>
<!-- 每日消费明细结束 -->
</unicloud-db>
onReady() {
this.$refs.udb.loadData({clear: true})
this.$refs.udb1.loadData({clear: true})
console.log('udb - ' + this.$refs.udb)
console.log(this.$refs.udb1)
}
// 报错： udb1.value.loadData is not a function 预期结果：
正常更新实际结果：
不能更新bug描述：
unicloud-db组件嵌套，里层db组件where依赖外层循环的数据 里层db组件不能手动更新数据
2 回复
在 uni-app 中使用 unicloud-db 组件时，如果里层的 unicloud-db 组件的 where 条件依赖于外层循环的数据，可能会遇到里层 unicloud-db 组件无法手动更新数据的问题。这是因为 unicloud-db 组件的 where 条件在初始化时就已经确定，后续的更新不会自动触发重新查询。
解决方案
-
使用
ref手动触发更新： 你可以通过ref获取里层unicloud-db组件的实例，并在外层数据变化时手动调用refresh方法来更新数据。<template> <view> <view v-for="(item, index) in outerList" :key="index"> <view>{{ item.name }}</view> <unicloud-db ref="innerDb" :where="`outerId == '${item.id}'`" v-slot:default="{data, loading}"> <view v-for="(innerItem, innerIndex) in data" :key="innerIndex"> {{ innerItem.name }} </view> </unicloud-db> </view> </view> </template> <script> export default { data() { return { outerList: [ { id: '1', name: 'Outer 1' }, { id: '2', name: 'Outer 2' } ] }; }, methods: { updateInnerDb() { this.$refs.innerDb.forEach(db => db.refresh()); } }, watch: { outerList: { handler() { this.updateInnerDb(); }, deep: true } } }; </script> -
使用
key强制重新渲染： 你可以通过给里层unicloud-db组件设置一个唯一的key，当外层数据变化时，key也会变化，从而强制里层组件重新渲染。<template> <view> <view v-for="(item, index) in outerList" :key="index"> <view>{{ item.name }}</view> <unicloud-db :key="item.id" :where="`outerId == '${item.id}'`" v-slot:default="{data, loading}"> <view v-for="(innerItem, innerIndex) in data" :key="innerIndex"> {{ innerItem.name }} </view> </unicloud-db> </view> </view> </template> <script> export default { data() { return { outerList: [ { id: '1', name: 'Outer 1' }, { id: '2', name: 'Outer 2' } ] }; } }; </script> -
使用
watch监听外层数据变化： 你可以通过watch监听外层数据的变化，并在变化时手动更新里层unicloud-db组件的数据。<template> <view> <view v-for="(item, index) in outerList" :key="index"> <view>{{ item.name }}</view> <unicloud-db ref="innerDb" :where="`outerId == '${item.id}'`" v-slot:default="{data, loading}"> <view v-for="(innerItem, innerIndex) in data" :key="innerIndex"> {{ innerItem.name }} </view> </unicloud-db> </view> </view> </template> <script> export default { data() { return { outerList: [ { id: '1', name: 'Outer 1' }, { id: '2', name: 'Outer 2' } ] }; }, watch: { outerList: { handler() { this.$nextTick(() => { this.$refs.innerDb.forEach(db => db.refresh()); }); }, deep: true } } }; </script>
