关于vue{ob: Observer}获取不到值的解决办法

最新推荐文章于 2023-08-15 14:30:03 发布

初晨未凉

最新推荐文章于 2023-08-15 14:30:03 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/110848583

笔记专栏收录该内容

61 篇文章

订阅专栏

本文探讨了在Vue应用中遇到的异步请求问题，特别是在使用axios获取数据后，如何正确地在methods中操作数据。作者指出，将数据处理代码放入axios的then块内部可以确保数据已经加载完成，从而避免了无法获取到数据的问题。通过实例展示了如何将获取的数据用于创建柱状图，展示了数据可视化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是由于异步请求造成的，通过axios进行请求数据，将数据存储在data里面，当我们在methods里面操作这个数据的时候就会出现这个问题，这个数据是可以console.log出来，但是拿不到的，刚开始我也在网上找了很多关于说转json的但是还是没有用，然后我就将其写在了通过axios获取数据的内部，然后就可以了。

created() {
	let id = this.getUrlParam("id");
	let ac = this.getUrlParam("ac");
	axios.get(`/svc/assessment/scale/report/${id}?ac=${ac}`)
		.then((res) => {
			this.exam = res.data.payload.indicators;
			this.endTime = res.data.payload.timeTaken;
			console.log(this.exam.score);
				var ctx = document.getElementById("myChart").getContext("2d");
				var chart = new Chart(ctx, {
					type: 'bar', //形状
					data: {
						labels: ["我的得分"],
						datasets: [{
							backgroundColor: [
								'rgba(190, 230, 253, 0.2)',
							],
							borderColor: [
								'#16A085',
							],
							borderWidth: 1,
							data: [this.exam.score],
						}]
					},
					options: {
						legend: {
							display: false
						},
					}
				});
		});
},