Vue中v-for无法加载users数组，求正确实现方案

嘿，我瞅了下你的代码，问题出在**this的指向**上！在axios的.then()回调里用普通函数的话，这个函数里的this并不是指向Vue实例——你以为是给组件data里的users数组赋值，实际上是给回调函数自己的this加了个属性，根本没更新到Vue的响应式数据里，所以v-for自然没东西可渲染啦。

给你三种可行的解决办法，选一种用就行：

方法1：使用箭头函数（最推荐） #

箭头函数不会绑定自己的this，会直接继承外层作用域的this（也就是Vue实例）。修改你的beforeMount钩子代码：

new Vue({
  el: "#vue-app",
  data: {
    name: "dani",
    thumbnail: '',
    users: []
  },
  beforeMount() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      // 把普通函数改成箭头函数
      .then((response) => {
        this.users = response.data
        console.log("users: ", this.users[0])
      })
      .catch(function (error) {
        console.log(error)
      })
  }
})

方法2：提前保存Vue实例的引用 #

在beforeMount里先把Vue实例的this存成一个变量，之后在回调里用这个变量操作数据：

new Vue({
  el: "#vue-app",
  data: {
    name: "dani",
    thumbnail: '',
    users: []
  },
  beforeMount() {
    // 先把Vue实例的this存起来
    const vm = this
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
        vm.users = response.data
        console.log("users: ", vm.users[0])
      })
      .catch(function (error) {
        console.log(error)
      })
  }
})

方法3：用bind()绑定this #

给回调函数手动绑定Vue实例的this，确保回调里的this指向正确：

new Vue({
  el: "#vue-app",
  data: {
    name: "dani",
    thumbnail: '',
    users: []
  },
  beforeMount() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
        this.users = response.data
        console.log("users: ", this.users[0])
      }.bind(this)) // 这里绑定Vue实例的this
      .catch(function (error) {
        console.log(error)
      })
  }
})

你的HTML部分代码完全没问题，只要JS里正确更新了users数组，v-for就能正常渲染出用户卡片啦。

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