Vue.js 如何在data function-vue中使用axios响应数据

使用axios获取api数据：

fetchData () {
  axios.get(globalConfig.OFFERS_URL)
    .then((resp) => {
      this.offersData = resp.data
      console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

数据功能：

  data () {
    return {
      offersData: {}
    }
  }

  data () {
    return {
      offersData: {},
      id: this.offersData.item[0].id
    }
  }

现在我可以在模板中使用获取的数据，如下所示：

{{offersData.item[0].id}

但我是否可以在数据函数中设置提取的数据：

  data () {
    return {
      offersData: {}
    }
  }

  data () {
    return {
      offersData: {},
      id: this.offersData.item[0].id
    }
  }

---

它对我不起作用，甚至可以将axios get的响应存储在数据函数中吗？

您可能正在寻找计算属性：

data () {
  return {
    offersData: {},
  }
},
computed() {
  id() {
    return this.offersData.item && this.offersData.item[0].id;
  }
}

---

对于数据函数，它用于定义组件的状态形状（设置要跟踪的属性）并为其提供有效的初始值。但是，在这种情况下，

id

既不应该是状态的一部分（毕竟它始终是

offersData

值的一部分），也不能在通过远程调用设置

offersData

之前计算其初始值。

您可能正在查找计算属性：

data () {
  return {
    offersData: {},
  }
},
computed() {
  id() {
    return this.offersData.item && this.offersData.item[0].id;
  }
}

---

对于数据函数，它用于定义组件的状态形状（设置要跟踪的属性）并为其提供有效的初始值。但是，在这种情况下，

id

不应该是状态的一部分（毕竟它始终是提供数据的

值的一部分）在通过远程调用设置
offersData
之前，也不能计算其初始值。
该返回语句将导致错误，因为
this.offersData.item
在组件初始化时是
未定义的
。在这种情况下，
这个.offersData
永远是真实的。如果（this.offersData.item&&this.offersData.item[0]）{返回this.offersData.item[0].id}

啊，错过了那部分，谢谢。我在这里做了一个快捷方式，因为

this.offersData.item

最初未定义，只能通过调用返回数组进行设置-因此如果失败，它会因某种原因失败。谢谢，据我所知

data（）

用于静态值和

v-model

，对吗？另外，为什么在id之前设置

this.offersData.item&&

？仍然无法获取它。因为

this.offersData

的初始值是空对象-当第一次调用

id（）

时，尝试检查整个路径会导致错误（尝试访问

未定义的
的属性
0
）。通过这种方式，可以避免使用所谓的-id is
undefined
进行检查，直到填充为止，不会引发错误。是的，您可以，但可以作为属性，而不是作为方法（即，您应该编写
This.id
，而不是
This.id（）
）该返回语句将导致错误，因为当组件初始化时，
this.offersData.item
是
undefined
。在这种情况下，
这个.offersData
永远是真实的。如果（this.offersData.item&&this.offersData.item[0]）{返回this.offersData.item[0].id}
啊，错过了那部分，谢谢。我在这里做了一个快捷方式，因为
this.offersData.item
最初未定义，只能通过调用返回数组进行设置-因此如果失败，它会因某种原因失败。谢谢，据我所知
data（）
用于静态值和
v-model
，对吗？另外，为什么在id之前设置
this.offersData.item&&
？仍然无法获取它。因为
this.offersData
的初始值是空对象-当第一次调用
id（）
时，尝试检查整个路径会导致错误（尝试访问
未定义的
的属性
0
）。通过这种方式，可以避免使用所谓的-id is
undefined
进行检查，直到填充为止，不会引发错误。是的，您可以，但可以作为属性，而不是作为方法（即，您应该编写
This.id
，而不是
This.id（）
）