使用Axios在Vue中填充数组

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发出获取请求以获取有关产品的各种数据-这也很好。

<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请求返回的数据来传播面包屑数组中的最后一项。

我尝试使用诺言在get请求完成后插入值,但是这样做会使整个应用程序崩溃,并且“不管诺言中执行了什么代码”,“无法读取未定义的属性'产品'”。

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
  }
}
评论