Vue中通过API获取数据后生成随机名言功能不生效问题咨询

1. axios回调this指向错误 #

你当前使用的普通函数作为axios的then回调，此时内部this不指向Vue实例，会导致this.quotes赋值失败，数组始终为空。
修改方案：

// 方案1：改用箭头函数绑定外层this
axios.get(url).then(res => {
  this.data = res.data
  this.quotes = this.data
})

// 方案2：提前缓存this指向
const _this = this
axios.get(url).then(function(res) {
  _this.data = res.data
  _this.quotes = _this.data
})

2. 随机方法返回值未绑定响应式变量 #

你当前的randomQuote仅将名言结果return，没有赋值给用于渲染的响应式变量，视图不会触发更新。
首先修改data定义（Vue2环境下data必须是函数返回对象，避免多实例数据共享），新增渲染用变量：

data() {
  return {
    data: [],
    quotes: [],
    currentIndex: 0,
    currentPage: 1,
    currentQuote: '' // 新增，用于存储当前展示的名言
  }
}

修改randomQuote方法，同时添加空数组边界判断：

randomQuote() {
  if (!this.quotes.length) return
  const index = Math.floor(Math.random() * this.quotes.length)
  this.currentQuote = this.quotes[index]
}

模板中直接绑定currentQuote渲染即可。

3. 接口返回结构不匹配 #

打印res.data确认接口返回的内容就是名言数组，如果接口返回的是嵌套结构（比如{code:200, data: [...], msg:'success'}），需要修改赋值逻辑：

axios.get(url).then(res => {
  // 对应实际返回结构取值
  this.quotes = res.data.data
})

4. 事件绑定错误 #

确认按钮已正确绑定点击事件@click="randomQuote"，无方法名拼写错误。

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