Utilizing the powerful combination of Laravel and Vue connected through an API has been smooth sailing so far. Recently, I made a request to fetch an offer using a method from Vue:
getOffer(id) {
this.$http.get('http://127.0.0.1:8000/api/offers/'+id)
.then(response => response.json())
.then(result => this.offer = result)
}
},
The response I received was structured as follows:
{
"body": "xx"
"title": "yy"
}
I stored this data in the 'offer' variable:
data() {
return {
offer: {
title:'',
body:''
}
}
},
This data was then utilized in the template:
<div>
<h3 class="headline mb-0">{{offer.title}}</h3>
<div>
<br>
{{offer.body}}</div>
</div>
Everything worked seamlessly up to this point.
However, I decided to switch to using Laravel Resource, which wraps the data within a "data" object in the JSON response. The new structure looks like this:
{
"data": {
"body": "xx"
"title": "yy"
}
}
My template is now empty - I'm seeking guidance on how to modify the code to function with this new data object format. Moreover, how can I handle scenarios where there are more objects within the "data", such as:
{
"data": {
"body": "xx"
"title": "yy"
},
"data2":{
"body": "xx"
"title": "yy"
},
}
Any insights or suggestions would be greatly appreciated!