nuxt.js fetching data to vuetify table - vue.js

Question

i am facing problem on fetching data inside vuetify table, it's not showing any data in side table.
MY Laravel API
Route::get('/businesslist',
'BusinessController#userlist')->name('businesslist');
Laravel API Controller
public function businesslist() {
$businesslist = Business::paginate(2)->toJson(JSON_PRETTY_PRINT);
return response($businesslist);
}
}
Nuxt Code
<template>
<v-card>
<v-card-title>
Nutrition
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="registerlist"
:search="search"
></v-data-table>
</v-card>
</template>
<script>
export default {
data () {
return {
search: '',
headers: [
{ text: 'SL,No', value: '' },
{ text: 'Name', value: 'name' },
{ text: 'Mobile ', value: 'mobile_number' },
{ text: 'Location ', value: 'location' },
{ text: 'Join Date ', value: 'registration_date' },
{ text: 'Renewal Date ', value: 'registration_renewal_date' },
],
registerlist: [
],
}
axios.get('/Businessregisterlist')
.then(res => this.registerlist = res.data.registerlist)
},
}
</script>

Answer 1

Firstly, you have to call API within a Function like this:
<script>
export default {
data() {
return {
list: []
}
},
methods: {
callAPI() {
axios.get('/', then(function(res){
this.list = res.data.registerList;
}))
}
},
mounted(){
this.callAPI(); // if you need that List on load then you can use mounted() otherwise that function will call during event.
}
}
</script>
Here, inside then() I think it's better to use function(). Because if you use function then it will indicate this Object. So, we can easily access all the Object Properties (Like: data(), methods() etc.).