TnWaterFall

[moe-yu]

数据更新时，瀑布流组件有概率不渲染或只渲染部分内容，我排查关于逻辑的bug，没想到是组件的问题，如果用v-for能正常渲染。 <TnWaterFall :data="waterfallData"> <template #left="{ 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> <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'); }); } );