I cant display data from laravel api - laravel

Question

I am trying to get data from my laravel app, and display it in Vue CLI.
I see the Response, but I can not display it in the VUE application.
When i do get to example API it's works, but not from my laravel server.
<template>
<div id="app">
<h1>{{ results }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return{
results: null
}
},
mounted() {
axios.get('http://127.0.0.1:8000/api/')
.then(response => {
this.results = response.data.results
})
}
}
</script>

Answer 1

Your results are being received as an array of objects, a JSON encoded Laravel collection. You need to single out the object you want to display, and then a property of that object.
<div id="app">
<h1>{{ results[0].name }}</h1>
</div>
However, you should really only be returning one object if this is the case from your controller method, not an array of objects. (e.g., ->first() instead of ->get())
<div id="app">
<h1>{{ result.name }}</h1>
</div>
Collections are generally for displaying multiple results in lists, table, options, etc.:
<div id="app">
<ul>
<!-- v-for will loop through results -->
<li v-for="(result, index) in results">{{ result.name }}</li>
</ul>
</div>
EDIT:
Also, your results declaration needs to be adjusted according to the Network response.
this.results = response.data.results;
Should be:
this.results = response.data;
Or alternatively, your controller response needs to be:
return response()->json(['results' => $results]);

Answer 2

The answer was Cross-Origin Resource Sharing.
To connect laravel API with front-end i need to do add barryvdh/laravel-cors by composer.
composer require barryvdh/laravel-cors
Next add middleware in app/Http/Kernel.php to enable using API outside laravel APP. In my problem to Vue Cli.