javascript - 使用 vue.js 将 API 数据保存到数组中

Question

我需要帮助才能做到这一点。我想将 API 中的用户列表保存到一个数组(称为“名称”)。我怎样才能做到这一点？我尝试了 forEach 但无法使其工作。谢谢!

编辑:我包装了该函数，但仍然无法正常工作。

import axios from 'axios'

    export default {
      data () {
        return {
          info: null,
          name: []
        }
      },
      mounted () {
        axios
          .get('http://localhost:3000/api/users/', {mode: 'no-cors'})
          .then(response => (this.info = response.data))
          .then(() => info.data.forEach(element => {

          }))
          .catch(error => {
            console.log(error)
            this.errored = true
          })
          .finally(this.loading = false)

      }
    }

Answer 1

根据上面的代码，我假设 this.info 中的数据是正确的。我在您的代码中看到的问题是:

1.

.then(response => (this.info = response.data))
.then(() => info.data.forEach(element => {

}))

info 看起来未定义。我认为这应该是 this.info。

.then(response => (this.info = response.data))
.then(() => this.info.data.forEach(element => {

}))

或者，如果您使用箭头函数语法并返回赋值表达式，则可以使用

.then(response => (this.info = response.data))
.then(info => info.data.forEach(element => {

}))

我真的不推荐这样做，因为一些 linting 规则不允许返回赋值表达式(有充分的理由)。链接依赖于这种隐式语言行为的 Promise 会使代码更难以理解。

2.

forEach 的作用很重要。 Vue 的 react 性不接受某些赋值语法，即 this.name[i] = element。您可以使用 push 等数组方法，但我建议您使用函数式编程运算符，例如 map 和 filter:

.then(() => (this.name = this.info.data.map(element => {

})))