uni-app udb组件嵌套时里层组件数据不更新

uni-app udb组件嵌套时里层组件数据不更新

产品分类

uniapp/小程序/微信

PC开发环境操作系统

Mac

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

13.6

HBuilderX类型

正式

HBuilderX版本号

3.99

第三方开发者工具版本号

最新

基础库版本号

最新

项目创建方式

HBuilderX

示例代码

<unicloud-db ref="udbSum" v-slot:default="{data, loading, error, options}" collection="pay"  
            :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && openid == '${userInfo.openid}' && is_remove == 0`"  
            groupby="openid" group-field="sum(pay_num) as payMonthSum" loadtime="manual">  
            <view  
                class="month-pay main-margin-top mian-box-shadow bg-white main-border-radius flex justify-center align-center">  
                <text class="text14px">¥</text>  
                <text class="text30px text-bold" v-if="data.length > 0">{{data[0].payMonthSum / 1000}}</text>  
                <text class="text30px text-bold" v-else>0</text>  
            </view>  
        </unicloud-db>  
        <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" v-after>  
                <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 v-slot:default="{data, loading, error, options}" v-if="data"  
                        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 / 1000}}</text>  
                        </view>  
                        <!-- 每日消费明细结束 -->  
                    </unicloud-db>  
                </view>  
            </view>  
            <!-- 循环日期结束 -->  
        </unicloud-db>  

<script steup>  
// 重新加载数据  
    function udbloadData() {  
        udb.value.loadData({  
            clear: true  
        })  
        udbSum.value.loadData({  
            clear: true  
        })  
    }  

    // 日期选择  
    function pickerDateChange(e) {  
        selectDate.value = e.detail.value  
    }  

    // 前往记一笔页面  
    function toNewView() {  
        uni.navigateTo({  
            url: '/pages/index/new/new'  
        })  
    }  

    onReady(() => {  
        udbloadData()  
    })  

    onShow(() => {  
        udbloadData()  
    })  
</script>

操作步骤

<unicloud-db ref="udbSum" v-slot:default="{data, loading, error, options}" collection="pay"  
            :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && openid == '${userInfo.openid}' && is_remove == 0`"  
            groupby="openid" group-field="sum(pay_num) as payMonthSum" loadtime="manual">  
            <view  
                class="month-pay main-margin-top mian-box-shadow bg-white main-border-radius flex justify-center align-center">  
                <text class="text14px">¥</text>  
                <text class="text30px text-bold" v-if="data.length > 0">{{data[0].payMonthSum / 1000}}</text>  
                <text class="text30px text-bold" v-else>0</text>  
            </view>  
        </unicloud-db>  
        <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" v-after>  
                <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 v-slot:default="{data, loading, error, options}" v-if="data"  
                        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 / 1000}}</text>  
                        </view>  
                        <!-- 每日消费明细结束 -->  
                    </unicloud-db>  
                </view>  
            </view>  
            <!-- 循环日期结束 -->  
        </unicloud-db>  

<script steup>  
// 重新加载数据  
    function udbloadData() {  
        udb.value.loadData({  
            clear: true  
        })  
        udbSum.value.loadData({  
            clear: true  
        })  
    }  

    // 日期选择  
    function pickerDateChange(e) {  
        selectDate.value = e.detail.value  
    }  

    // 前往记一笔页面  
    function toNewView() {  
        uni.navigateTo({  
            url: '/pages/index/new/new'  
        })  
    }  

    onReady(() => {  
        udbloadData()  
    })  

    onShow(() => {  
        udbloadData()  
    })  
</script>

预期结果

里层数据更新

实际结果

里层数据没有更新

bug描述

udb组件嵌套，里层组件数据不更新。 里层组件where依赖外部组件循环出来的值， 页面第一次加载数据正常显示， 当添加数据后返回页面，外层数据可以正常更新，但是里层数据不会更新


更多关于uni-app udb组件嵌套时里层组件数据不更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

重复问题 https://ask.dcloud.net.cn/question/184447

更多关于uni-app udb组件嵌套时里层组件数据不更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 udb 组件时，如果遇到嵌套组件数据不更新的问题，可能是由于以下几个原因导致的。下面是一些常见的解决方法：

1. 确保 props 传递正确

如果你在嵌套组件中使用了 props，确保父组件正确地将数据传递给了子组件。例如：

<!-- 父组件 -->
<template>
  <child-component :data="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Hello World'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  props: ['data']
};
</script>

2. 使用 watch 监听数据变化

如果父组件的数据发生了变化，但子组件没有更新，你可以在子组件中使用 watch 来监听 props 的变化：

<!-- 子组件 -->
<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  props: ['data'],
  watch: {
    data(newVal) {
      console.log('Data updated:', newVal);
      // 在这里处理数据更新后的逻辑
    }
  }
};
</script>

3. 使用 key 强制更新组件

如果你希望在某些情况下强制重新渲染子组件，可以使用 key 属性。当 key 的值发生变化时，Vue 会强制重新渲染组件：

<!-- 父组件 -->
<template>
  <child-component :key="parentData" :data="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Hello World'
    };
  }
};
</script>

4. 检查 udb 组件的生命周期

udb 组件可能有自己的生命周期钩子，确保你在正确的生命周期钩子中更新数据。例如，在 mounted 或 updated 钩子中处理数据更新。

5. 确保数据是响应式的

Vue 的响应式系统有时可能无法追踪到某些数据的变化，尤其是在直接修改数组或对象时。确保你使用 Vue 提供的方法来修改数据，例如 Vue.set 或 this.$set：

this.$set(this.someObject, 'key', 'value');
回到顶部