Question

我是Vue的新手，但根据我的研究，这应该可以正常工作。控制台将用户始终显示为null，但是当我查看请求的响应时，它就会显示用户。我以为=>应该更新vue实例。

...
data () {
  return {
    users: null,
  }
},
...
methods: {
  getUsers () {
    this.$axios.get('/api/users')
      .then(r => {
        this.users = r.data
      })
    console.log(this.users)
  },
},
...
created () {
  this.getUsers()
  this.users.forEach(function (u) {
    ...
  })
}

Answer 1

如果要遍历用户集合，则必须首先等待它们实际可用-可以使用then回调：

export default {
  data () {
    return {
      users: [],
    }
  },
  methods: {
    getUsers () {
      return this.$axios.get('/api/users')
        .then(r => {
          this.users = r.data
        })
        .catch(error => console.log(error));
    },
  },
  created () {
    this.getUsers().then(() => {
      this.users.forEach(function (u) {
      ...
      })
    })
  }
}

与其从vue组件中转换返回的集合，不如将其返回并以响应格式格式化-使用纯PHP可以通过array_map实现-在这里，我使用的是{{1} }模型为例：

User

以上内容将返回如下内容：

$users = array_map(function (User $user) {
    return [
        'value' => $user->id,
        'name' => $user->name,
    ];
}, $users);

Answer 2

您可以将您的用户处理转移到观察者：

...
data () {
  return {
    users:[],
  }
},
watch: {
  users (users) {
    if( ! this.users.length )
       return;
    this.users.forEach(function (u) {
      ...
    })
  },
},
...
methods: {
  getUsers () {
    this.$axios.get('/api/users')
      .then(r => {
        this.users = r.data
      })
    console.log(this.users)
  },
},
...
created () {
  this.getUsers()
}

或者，如果您希望一次性处理，则将其设为方法，然后在axios then（）中调用该方法：

...
methods: {
  getUsers () {
    this.$axios.get('/api/users')
      .then(r => {
        this.users = r.data
        this.processUsers();
      })
    console.log(this.users)
  },
  processUsers() {
     // do something with this.users
  },
},

Vue Ajax请求未更新数据

2 个答案: