NuxtJS/Vue：mounted钩子执行后页面数据未更新问题求助

嘿，我一眼就看出问题所在了——你现在只是在请求成功后return了一个包含stats的对象，但这个对象根本没和Vue的响应式系统挂钩，页面当然不会更新啦！Vue的响应式更新依赖于修改组件data选项中声明的响应式变量，下面是具体的修复步骤：

1. 先在组件中声明响应式变量 #

首先要在组件的data选项里定义stats，让它成为Vue可以追踪的响应式数据：

data() {
  return {
    stats: null // 初始值设为null，对应模板里的v-if判断
  }
}

2. 修改mounted中的请求逻辑 #

不要在then回调里return对象，而是把接口返回的数据直接赋值给this.stats。另外注意：axios返回的响应对象中，实际的接口数据通常存在res.data里，你可以对照console.log的结果调整路径：

mounted: function() {
  axios.get('/api/user/profile/stats')
    .then((res) => {
      console.log(res)
      // 将接口数据赋值给响应式变量，触发页面更新
      this.stats = res.data; 
      // 如果接口返回的结构是res.data.stats，那就要改成this.stats = res.data.stats
    })
    .catch((e) => {
      console.log(e)
    })
}

3. 验证模板的变量路径 #

最后确认模板里的stats.ident是否和接口返回的结构匹配。比如如果接口返回的res.data里直接有ident字段，那当前模板就没问题；如果ident是嵌套在stats字段下，那你需要调整赋值逻辑或者模板中的变量路径。

为什么之前的代码没用？因为mounted钩子的返回值不会被Vue处理，它只是用来执行初始化操作的生命周期函数，只有修改组件的响应式数据，才能触发Vue的DOM更新机制哦！

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