vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题

前言

这个标题不太好取。

本文需要下面的知识：https://zhuanlan.zhihu.com/p/260811233​zhuanlan.zhihu.com

问题描述

我最近的一个功能需求是通过axios获取我存储在COS中的json文件，同时渲染到页面上。

而问题就是，axios可以成功获取数据，组件也可以成功渲染，但是控制台会报错

[Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"。

问题分析

首先，我的情况比我已经查到的博主们的问题更为复杂。

我的json文件部分内容如下：

{

"0": {

"headline": "如何快速调整显示器组的亮度？",

"url": "zhuanlan.zhihu.com/p/259647484",

"dateP": "2020-09-26T13:35:07.000Z",

"dateM": "2020-09-26T13:37:24.000Z",

"img": "https://pic2.zhimg.com/v2-8b58a57ba0923d23329abc16766da34c_r.jpg",

"text": "前言 Mac的情况我不清楚，但是Windows下调整显示器亮度其实是一个挺烦人的事。 我的显示器组为一个15.6寸的副屏，一个22寸的显示器，一个15.6寸的笔记本屏幕。 由于硬件原因，通过显示器本身调整亮…"

},

"1": {

"headline": "通过Vue实现vw/vh自适应单位",

"url": "zhuanlan.zhihu.com/p/257866252",

"dateP": "2020-09-22T10:51:08.000Z",

"dateM": "2020-09-22T10:51:08.000Z",

"img": "https://pic4.zhimg.com/v2-8ac0ec7ef990ca579657ae5b8bea714c_r.jpg",

"text": "前言 虽然现在可能响应式布局多一些，但是我还是觉得自适应单位比较好用。对于一些框架的UI组件，例如Vuetify，可能并不支持使用自适应单位，此时就会非常影响布局效果。 这篇文章提供的方法可以帮助你实现这…"

},

"2": {

"headline": "如