TnWaterFall

[moe-yu]

数据更新时，瀑布流组件有概率不渲染或只渲染部分内容，我排查关于逻辑的bug，没想到是组件的问题，如果用v-for能正常渲染。` <template #left="{ item }"> <view class="Frame2267" @click="gotoDetail(item.id)">

{{ item.position }} {{ item.state }}

                    <view class="Frame2264">
                        <view class="t1">{{ item.title }}</view>
                        <view class="t2">{{ item.bedrooms }}室{{ item.livingrooms }}厅 | {{ item.space }}&sup2; | {{ item.orientation_data }}</view>
                        <view class="t3">{{ item.price }}元/平</view>
                        <view class="t4">{{ item.cost }}万</view>
                        <button class="Frame2271">联系业主</button>
                    </view>
                </view>
            </template>
            <template #right="{ item }">
                <view class="Frame2267" @click="gotoDetail(item.id)">
                    <view class="Rectangle9">
                        <image :src="item.url"></image>
                        <view class="Frame2257">
                            <image src="./assets/401位置.png"></image>
                            <text>{{ item.position }}</text>
                        </view>
                        <view class="Frame2479">{{ item.state }}</view>
                    </view>
                    <view class="Frame2264">
                        <view class="t1">{{ item.title }}</view>
                        <view class="t2">{{ item.bedrooms }}室{{ item.livingrooms }}厅 | {{ item.space }}&sup2; | {{ item.orientation_data }}</view>
                        <view class="t3">{{ item.price }}元/平</view>
                        <view class="t4">{{ item.cost }}万</view>
                        <button class="Frame2271">联系业主</button>
                    </view>
                </view>
            </template>
        </TnWaterFall>
        <template>
            <!-- test -->
            <div>
                <div v-if="waterfallData.length">
                    <div v-for="item in waterfallData" :key="item.id">
                        <!-- 瀑布流项的渲染逻辑 -->
                        <img :src="item.url" alt="House Image" />
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.position }}</p>
                        <p>{{ item.orientation_data }}</p>
                        <p>{{ item.cost }}</p>
                        <p>{{ item.price }}</p>
                    </div>
                </div>
                <div v-else>No data available.</div>
            </div>
        </template>
        const waterfallData = computed(() => globalStore.homeWaterfall);

watch( () => globalStore.homeWaterfall, (newValue) => { console.log('Waterfall Data Changed:', newValue); console.log('waterfallData', waterfallData.value); nextTick(() => { console.log('Re-rendering after data change'); }); } ); `