Vue3无法渲染AJAX返回JSON值 报RandomTopic赋值undefined错误

你碰到的Cannot set property 'RandomTopic' of undefined报错，和接口本身无关——能正常打印res.data已经说明接口请求是通的，核心问题是接口请求成功回调里的this没有指向当前Vue组件实例。
你大概率在写请求逻辑时，给成功回调传的是普通function() {}形式的函数。普通函数的this是运行时动态绑定的，在异步请求的回调触发时，严格模式下this会是undefined，根本不是你当前的组件实例，自然找不到RandomTopic属性去赋值。
另外你的代码还有个潜在的渲染问题：你给RandomTopic设的初始值是null，而v-for指令要求遍历的目标必须是可迭代的数组/对象类型，接口返回前组件第一次渲染时，遍历null会直接抛错。

1. 解决this指向错误 #

两种通用改法选一种就行：

• 优先用箭头函数写回调：箭头函数不会生成自己的this上下文，会直接继承外层mounted钩子的this（也就是当前组件实例），改起来最方便。示例：

// 以常见的axios请求为例
axios.get('/api/topics').then((res) => {
  // 这里的this就是组件实例，可以正常赋值
  this.RandomTopic = res.data
})

• 如果不想改回调写法，可以在请求外层提前把组件实例的引用存下来，回调里用存好的变量访问：

mounted() {
  const vm = this // 提前存组件实例
  axios.get('/api/topics').then(function(res) {
    vm.RandomTopic = res.data // 用存好的vm代替this
  })
}

2. 修正初始值避免首屏渲染报错 #

把data里RandomTopic的初始值从null改成空数组，这样接口返回前第一次渲染时，v-for遍历空数组不会报错，等接口数据赋值后页面会自动更新：

data() {
  return {
    RandomTopic: [] // 初始值用空数组，不要用null
  }
}

模板部分不需要改动：

<ul>
  <li v-for="value in RandomTopic" :key="value.id">{{ value.title }}</li>
</ul>

脚本部分：

export default {
  data() {
    return {
      RandomTopic: []
    }
  },
  mounted() {
    // 替换成你实际的请求逻辑即可，注意回调要用箭头函数
    fetch('/your/topic/api')
      .then(response => response.json())
      .then((res) => {
        console.log(res)
        this.RandomTopic = res
      })
  }
}

改完之后接口返回的数组数据就能正常渲染到列表里了。

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