初始化时，传递给子组件的列表项数据未在视图中更新

Question

我的问题：初始化编译时，热榜对应的列表数据发送了请求，也正常更新listData中了，但子组件却没办法渲染，但是点击前端tab后，再点击热榜tab看，其下的列表就正常渲染了，我觉得好像是传给子组件的数据为更新前的空对象，这个怎么解决？
运行到小程序的效果：

初始化时控制台的打印结果：

代码：

<template>
	<view class="hot-list-item">
		<hot-list-item v-for="(item,index) in listData[currentIndex]" 			 :key="index"
				:data="item" :ranking="index+1" />
	</view>
</template>

<script>
import { getTabsListApi,getHotArticleListApi } from "@/api/hot"
	export default {
		data() {
			return {
				//顶部tab栏
				tabsList:[],
				//文章列表
				listData:{},
				//当前tab索引
				currentIndex:0
			};
		},
		created(){
			// 获取tab里列表
			this.getTabsList();
			
		},
		methods:{
			async getTabsList(){
				const {list}=await getTabsListApi();
				this.tabsList=list;
				// 获取文章列表
				this.getHotArticleList();
			},
			onTabChange(tabIndex){
				this.currentIndex= tabIndex;
				this.getHotArticleList();
			},
			async getHotArticleList(){
				// 性能优化：请求的数据应该缓存起来，而不是tabindex改变一次就请求。
				if(!this.listData[this.currentIndex]){
					// 获取当前tab的id
					const id=this.tabsList[this.currentIndex].id;
					const {list}=await getHotArticleListApi(id);
					this.listData[this.currentIndex]=list;
					console.log('updated',this.listData);
				}
			}
		}
	}
</script>` 

Answer 1

Sunday 2023-08-25 10:54:58

你好

正常情况下我们传递响应式数据到子组件，那么响应式数据拿到之后，应该会正常渲染的。 所以不会是因为数据问题导致的。

如果是这种情况，我猜测可能是因为 接受数据不是响应性导致的

• 提问者 FrontSiegeLionLang #1

  是的，老师。这个我也是刚找到原因。这是因为在初始化后给对象直接添加新的属性，vue监听不到新增的属性，没有给其增加getter和setter方法，因此会导致响应式丢失。解决方法为：利用this.$set()新增属性，而不是直接赋值新增。