How to populate an array in Vue with data from Axios request

Question

v-breadcrumbs displays data from the breadcrumbs array - this works fine with static data.

<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 makes a get request to get various data about a product - this also works fine.

<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>

I would then like to use the data returned from the get request to propagate the last item in the breadcrumb array.

I tried using a promise to insert the value after the get request has complete but in doing so the whole app crashes with " Cannot read property 'products' of undefined " regardless of what code is executed in the promise.

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

I realise I must be altering the 'response' value somehow in using the .then() promise. Is this the best way to solve this problem or should I be looking into Vue lifecycle hooks?

Here is the API response to the get request:

{
  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
  }
}

Dimitris Papazacharias · Accepted Answer · 2020-02-07 10:50:23Z

2

If you want a variable to affect your DOM you have to declare it as a property in the data function of the Vue isntance:

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

Then, in order to access the response data property, you have to use a lifecycle hook. For example:

<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>

answered Feb 7, 2020 at 10:50

Dimitris Papazacharias

6912 gold badges7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Toodoo · Accepted Answer · 2020-02-07 10:36:06Z

1

In your script define response, it will be then known by your Vue component :

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

then, affect it in the then of axios call, it's how it work :

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

answered Feb 7, 2020 at 10:36

Toodoo

8,8106 gold badges40 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to populate an array in Vue with data from Axios request

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related