After authenticating and fetching data from a 3rd party API in my Laravel Controller, I'm encountering an issue where 'undefined' is being logged in the console instead of the actual data that I want to store in a Vue component.
I've tried various approaches, such as using a get method instead of fetch, but unfortunately, I still end up with undefined being logged. I also did some research on arrow functions, although I am not currently implementing them in this code.
data() {
return {
tickets: [],
};
},
created() {
this.fetchTickets();
},
methods: {
fetchTickets() {
fetch('/api')
.then(res => {
this.tickets = res.json;
})
.then(res => {
console.log(res.json);
})
}
}
Essentially, I am looking to successfully retrieve a collection of data from a PHP backend request that interacts with a 3rd party API. This data should then be stored within my Vue component, rather than just logging undefined as it currently does.
EDIT Backend request in PHP
$response = $client->get('v1/tickets/search.json', [
'query' => ['statuses[]' => 'active', 'assignedTo[]' => 314955,
'sortDir' => 'desc', 'sortBy' => 'updatedAt']
]);
$json = (string)$response->getBody()->getContents();
$decoded = json_decode($json, true);
return collect($decoded);
Route: Route::get('/api', 'ApiController@getTickets',);