如何使用来自 Axios 请求的数据填充 Vue 中的数组答案

【问题标题】：How to populate an array in Vue with data from Axios request如何使用来自 Axios 请求的数据填充 Vue 中的数组
【发布时间】：2020-02-07 09:55:14
【问题描述】：

v-breadcrumbs 显示来自面包屑数组的数据 - 这适用于静态数据。

<v-row>
    <!-- Breadcrumbs -->
    <v-col class="d-flex">
        <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
    </v-col>
</v-row>

<v-row>
    <v-col class="d-flex">
        <p class="blue--text title font-weight-medium my-0">{{response.products.title}}</p>
    </v-col>
</v-row>

Axios 发出 get 请求以获取有关产品的各种数据 - 这也可以正常工作。

<script>
export default {
  async asyncData({$axios, params}){
    try{
      let response = await $axios.$get(`/api/products/${params.id}`)
      console.log(responce);

      return{
        responce: responce
      }
    }catch(err){
      console.log(err);
    }
  },
  data: () => ({
    breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}]
  })
</script>

然后我想使用从 get 请求返回的数据来传播面包屑数组中的最后一项。

我尝试在获取请求完成后使用承诺插入值，但这样做整个应用程序崩溃 “无论执行什么代码，都无法读取未定义的属性 'products'”在承诺中。

let response = await $axios.$get(`/api/products/${params.id}`)
                     .then((result) => {
                       // Some code here
                     })

我意识到我必须在使用 .then() 承诺时以某种方式改变“响应”值。这是解决此问题的最佳方法还是我应该研究 Vue 生命周期挂钩？

这是对 get 请求的 API 响应：

{
  success: true,
  products: {
    rating: [],
    _id: '5e3bfd038125ebafba2ff8ce',
    owner: {
      _id: '5e397eed2da03d0817f3f870',
      name: 'Jeff Bezos',
      about: 'Jeff is the owner of this site.',
      photo: '-',
      __v: 0
    },
    category: { _id: '5e397bcc2da03d0817f3f86d', type: 'Books', __v: 0 },
    title: 'The Everything Store',
    description: 'A book about Amazon',
    photo: '-',
    price: 12,
    stockQuantity: 73,
    __v: 0
  }
}

【问题讨论】：

标签： javascript vue.js axios vuetify.js

【解决方案1】：

如果你想让一个变量影响你的 DOM，你必须在 Vue 实例的数据函数中将它声明为一个属性：

data: () => ({
  breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}],
  response: null
})

然后，为了访问response 数据属性，您必须使用生命周期挂钩。例如：

<script>
// import axios if needed

export default {
  data: () => ({
    breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}]
  }),
  created(){
      // I don't know where params object comes form
      $axios.$get(`/api/products/${params.id}`)
      .then(response => {
        this.response = response;
      })
      .catch(err => {
        console.log(err);
      })
  },

</script>

【讨论】：

【解决方案2】：

在您的脚本中定义 response，然后您的 Vue 组件将知道它：

data: () => ({
  breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}],
  response: {}
})

然后，在 axios 调用的then 中影响它，它是这样工作的：

$axios.$get(`/api/products/${params.id}`)
                 .then((result) => {
                   this.response = result
                 })

【讨论】：