Sails.js应用中调用axios后页面元素不更新问题排查

看起来你遇到的问题其实是两个小细节没处理好，咱们一步步来解决：

1. 你拿到的是Axios的响应对象，不是实际API数据 #

Axios的get请求返回的response是一个封装后的对象，里面包含了响应头、状态码和实际的API数据（存在response.data里）。你现在直接把整个response赋值给info，加上初始info是数组，类型不匹配可能导致Vue的响应式更新没正常触发。

修改你的mounted钩子代码：

mounted () {
  axios
    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(response => {
      // 取response里的实际数据赋值
      this.info = response.data
      console.log(this.info) // 现在可以看到正确的API数据了
    })
}

2. 初始数据类型匹配更合理 #

你的API返回的是一个JSON对象，而你初始把info设为数组[]，虽然Vue允许类型替换，但统一类型会减少奇怪的问题，建议把data里的初始值改成空对象：

data () {
  return {
    info: {} // 改成空对象，和API返回的类型一致
  }
}

额外检查点 #

• 确保你引入CDN的顺序是先引入Vue，再引入Axios，不然Vue还没加载完成，axios的调用可能有问题；
• 如果还是没更新，可以试试在赋值后手动触发响应式更新（不过上面的修改应该已经解决了，这是兜底方案）：

this.$forceUpdate()

按照上面的步骤修改后，页面应该能正确渲染出API返回的数据了。

内容的提问来源于stack exchange，提问作者rams