Javascript 组件更新无序Vue

以下是我使用Bootstrap、Vue和Axios获得的代码：

设置：

*忽略组件_a中的选项卡内容

main.js

Vue.component（'component_a'{
道具：['info']，
模板：`




粗牛仔布
可能还没听说过jean shorts Austin.Nesciut tofu stumptown aliqua，复古合成大师
清洁。胡子陈词滥调临时，威廉斯堡卡尔斯纯素helvetica。Reprehenderit屠夫复古
keffiyeh dreamcatcher synth.Cosby毛衣eu banh mi，qui irure terry richardson ex squid.Aliquip
salvia cillum iphone。Seitan aliquip quis羊毛衫美国服装，屠夫voluptate nisi
魁。
食品车修理工
locavore，accusamus mcsweeney的marfa nulla单源咖啡鱿鱼。实习+1 labore velit，
blog服装PBR紧身裤下一层wes anderson artisan four loko farm to table craft啤酒花呢。
Qui photo booth活版印刷，commodo enim craft beer mlkshk aliquip jean短裤ullamco广告乙烯基色
PBR.有机诺斯特鲁德人，假设劳动美学大师莫利特·凯塔·赫尔维蒂卡VHS
salvia yr，vero magna velit sapiente labore stumptown素食者fanny pack odio cillum wes anderson 8位，
可持续牛仔短裤胡须ut DIY道德过失特里·理查森生物柴油艺术派对场景
tumblr stumptown屠夫vero sint qui sapiente accusamus纹身回声公园。
`
}
Vue.组件（“组件b”{
数据：（）=>{
返回{
列：null
}
},
道具：['info']，
模板：`
EP
{{col}}
{{row[col]}
`,
方法：{
setActiveDisplay:函数（id，ad）{
此.$emit（“设置活动显示”，id，ad）
}
},
观察：{
信息：{
即时：错，
处理程序（val，oldVal）{
如果（val.length==0）{
this.columns=null
}
this.columns=Object.keys（val[0]）
}
}
var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
信息：[]，
activeDisplay：“仪表板”，
}
},
方法：{
getAPIData（id，类型）{
axios
.get（`${SERVER}:${PORT}/api/${type}/${id}`）
。然后（响应=>{
this.info=response.data；
})
.catch（error=>console.log（error.response））；
},
setActiveDisplay:函数（id，ad）{
如果（ad=='ep'）{
如果（this.activeDisplay==='ep'）{
返回
}
this.getAPIData（'*'，ep'）
}
否则如果（ad=='activeEp'）{
如果（this.activeDisplay=='activeEp'）{
返回
}
this.getAPIData（id，'ep'）
}
this.activeDisplay=ad；
}
},
挂载（）{
这个是.getData
}
})

main.html

问题:

单击表中B中的链接后，它会正确调用setActiveDisplay方法和getAPIData。但是，在getAPIData（即Axios GET调用）运行后，info（根实例）未更新为在B中的表中单击的单个项目，我通过登录控制台了解到这一点。info（根实例）包含表中的所有对象。（组件B是打开网页时显示的第一个组件）

然后，网页（正确）更改为显示组件A（由于activeDisplay设置变量并显示正确的组件），但我可以看到与表中项目数相同的选项卡数。我在一瞬间看到了这一点。然后，组件a被更新，以显示最初单击的正确选项卡

我确信这是一个操作顺序问题（因为我是Vue新手），但似乎无法理解为什么信息（根实例）对象在运行时未设置为单个项。我已经在浏览器中运行了调试器，并且不再调用getAPIData。getAPIData正在获取正确的数据，但就好像Vue正在保存修改infount的getAPIData调用的结果一样il组件A被呈现（即使我在单击组件B中的链接后要求它更新）

操作顺序

使用根目录中的多个对象呈现表中的Binfo=>用户单击表中的链接=>在B=>中调用setActiveDisplay=>发出的事件调用根目录中的setActiveDisplay=>根目录中调用的getAPIData setActiveDisplay（直到此处为止都正常工作）=>应将根信息对象更新为单个项=>由于根信息对象（以及由于传递给A的道具）包含来自getAPIData调用的一个对象，因此渲染为一个选项卡

编辑1：

经过更多的调试，我发现在vue.js开始处理点击后，axios.js的dispatchRequest将被正确的API url调用……因此，getAPIData中的this.info=response.data在该方法完成后没有数据。下面是我在调试中发现的流程分解：

运行getAPIData以完成（导致根实例的info对象未定义=>vue.js处理组件B=>axios.js中表中项目的单击事件正在使用完整URL=>more vue.js processing=>接收来自getAPIData的响应调用DisactRequest事件