The v-breadcrumbs component is used to display data from the breadcrumbs array, which works seamlessly 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>
When making a GET request using Axios to fetch product data, all works correctly as expected.
<script>
export default {
async asyncData({$axios, params}){
try{
let response = await $axios.$get(`/api/products/${params.id}`)
console.log(response);
return{
response: response
}
}catch(err){
console.log(err);
}
},
data: () => ({
breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}]
})
</script>
The main goal is to dynamically update the last item in the breadcrumb array with data fetched from the API response.
An attempt was made to use a promise to modify the value after the GET request completes, but it resulted in crashing the app with an error: "Cannot read property 'products' of undefined", regardless of the code executed within the promise.
let response = await $axios.$get(`/api/products/${params.id}`)
.then((result) => {
// Some code here
})
This issue may be related to altering the 'response' value within the .then() promise. Is this the optimal solution for solving this problem, or should Vue lifecycle hooks be explored instead?
Below is an example of the API response received from 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
}
}