vue props 接收数据,watch和mounted同时完成数据渲染

vue props 接收数据,watch和mounted同时完成数据渲染

在子组件里,接收数据之后可以直接mounted里操作数据

export default {
		name: 'zblist',
		props: {
			lists:Array
		},
		data() {
			return {
				show: true,
				Tlist: this.lists,
				list_today:[]
			}
		},
		mounted() {
			console.log(this.Tlist)   //报错
			// this.list_today = this.Tlist[0].today
		},
	}

但是今天遇到的问题,可能是axios异步传输数据的问题,页面刚加载的时候mounted里打印的数据是长度为0的空数据,但是{{Tlist}}可以在页面渲染,打印数据如下:vue props 接收数据,watch和mounted同时完成数据渲染_第1张图片
在编辑器任意编辑保存之后,页面自动刷新才赋值成功
vue props 接收数据,watch和mounted同时完成数据渲染_第2张图片
查看文档和请教大神之后,觉得可以用mounted和watch同时完成数据渲染

export default {
		name: 'zblist',
		props: {
			lists:Array
		},
		data() {
			return {
				show: true,
				Tlist: this.lists,
				list_today:[]
			}
		},
		watch:{
			lists:function(newVal,oldVal){
				this.Tlist = newVal
				this.getData()
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				console.log(this.Tlist)
				this.list_today = this.Tlist[0].today
			}
		},
	}

这样,不管是初始化的渲染还是数据变化后再监听,都能操作数据了。

第一次用vue做项目,有很多很多盲目的地方,希望路过的大神能指点一二

你可能感兴趣的:(vue props 接收数据,watch和mounted同时完成数据渲染)