Vue.js Vue ajax请求不是'；t更新数据

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

。。。
数据（）{
返回{
用户：空，
}
},
...
方法：{
getUsers（）{
这是。$axios.get（'/api/users'））
.然后（r=>{
this.users=r.data
})
console.log（this.users）
},
},
...
创建（）{
这个文件名为getUsers（）
this.users.forEach（函数（u）{
...
})
}

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

...
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中调用该方法，然后（）

---

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

...
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中调用该方法，然后（）

---

如果要在用户集合中循环，必须先等待用户实际可用-您可以使用

然后使用
回调：

导出默认值{
数据（）{
返回{
用户：[]，
}
},
方法：{
getUsers（）{
返回此。$axios.get（'/api/users'））
.然后（r=>{
this.users=r.data
})
.catch（错误=>console.log（错误））；
},
},
创建（）{
this.getUsers（）。然后（（）=>{
this.users.forEach（函数（u）{
...
})
})
}
}

与其转换vue组件内返回的集合，不如使用响应将其格式化返回-使用普通php，您可以使用
数组\u映射
-这里我使用
用户
模型数组作为示例：

$users=array\u映射（函数（User$User）{
返回[
'value'=>$user->id，
“名称”=>$user->name，
];
}(万元用户),；

以上内容将返回类似以下内容：

[
[
“值”=>1，
'name'=>'Jon Doe'，
],
[
“值”=>2，
'name'=>'Jane Doe'，
],
]
如果您想在用户集合中循环，您必须先等待他们实际可用-您可以使用
然后使用
回调：

导出默认值{
数据（）{
返回{
用户：[]，
}
},
方法：{
getUsers（）{
返回此。$axios.get（'/api/users'））
.然后（r=>{
this.users=r.data
})
.catch（错误=>console.log（错误））；
},
},
创建（）{
this.getUsers（）。然后（（）=>{
this.users.forEach（函数（u）{
...
})
})
}
}

与其转换vue组件内返回的集合，不如使用响应将其格式化返回-使用普通php，您可以使用
数组\u映射
-这里我使用
用户
模型数组作为示例：

$users=array\u映射（函数（User$User）{
返回[
'value'=>$user->id，
“名称”=>$user->name，
];
}(万元用户),；

以上内容将返回类似以下内容：

[
[
“值”=>1，
'name'=>'Jon Doe'，
],
[
“值”=>2，
'name'=>'Jane Doe'，
],
]
尝试移动
控制台。记录
调用
，然后
关闭并查看它返回的内容。调用是异步的，所以它在收到响应之前不会更新
user
属性。这是有效的，但我想我真正的问题来自我调用getUsers的创建方法。在调用之后，我尝试使用foreach遍历每个用户，但是我在foreach上得到一个TypeError，因为this.users为null。我假设这是因为我调用getUsers并感觉它是异步的，它在ajax请求完成之前运行foreach？有没有特定的原因让您在脚本中而不是在模板中循环返回的结果？如果您向我展示您的整个组件，我可以为您进行排序，但首先确保您的
用户
默认为数组
用户：[]
，而不是
null
。您可以在
r.data
上运行forEach，然后再分配给
this.users
。或者您可以使
getUsers
async并执行
this.getUsers（）。然后（（）=>{this.users.forEach（…）}）
@Chris-最好是直接从服务器返回所需的集合，而不是在浏览器中执行。有时返回整个记录/模型的集合可能会显示一些前端用户不应该看到的数据，如密码等。您可以在服务器上运行
array\u map
（如果您使用的是php）若要以您需要的格式返回，我将立即将其添加到我的答案中。尝试移动
控制台。记录
调用
，然后
关闭并查看返回的内容。调用是异步的，所以它在收到响应之前不会更新
user
属性。这是有效的，但我想我真正的问题来自我调用getUsers的创建方法。在调用之后，我尝试使用foreach遍历每个用户，但是我在foreach上得到一个TypeError，因为this.users为null。我假设这是因为我调用getUsers并感觉它是异步的，它在ajax请求完成之前运行foreach？有没有特定的原因让您在脚本中而不是在模板中循环返回的结果？如果您向我展示您的整个组件，我可以为您进行排序，但首先确保您的
用户
默认为数组
用户：[]
，而不是
null
。您可以在
r.data
上运行forEach，然后再分配给
this.users
。或者您可以使
getUsers
async并执行
this.getUsers（）。然后（（）=>{this.users.forEach（…）}）
@Chris-最好是直接从服务器返回所需的集合，而不是在浏览器中执行。有时返回col