How to Fetch data using Vue Js laravel - laravel

Question

How do I fetch data using vue js and laravel . I have created vue component and controller.
Here is my database table structure
<script>
export default {
data(){
return {
kudos : []
}
},
created(){
axios.get('./api/kudos')
.then(response => this.kudos = response.data);
}
}
</script>
What I need to do is fetch the database data to blade file using vuejs .
Could someone guide me step by step?
Controller
Vue Component
Blade File

Answer 1

I think you're looking for something like this?
Controller:
public function searchDatabase( Request $request )
{
$foo = DB::table('bar')
->where([
["description", 'LIKE', "%{$request->input('query')}%"]
])
->limit(5)
->get();
return response()->json($foo);
}
YourComponent.vue
<template>
<div id="wrapper">
<div class="input-group">
<input type="text" placeholder="Search database.." v-model="query" v-on:keyup="autoComplete" class="form-control">
</div>
<div class="panel-footer" v-if="results.length">
<table class="table table-sm">
<tr v-bind:key="result" v-for="result in results">
<td> {{ result.description }} </td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default{
data(){
return {
query: '',
url: '/search/blade/route',
results: []
}
},
methods: {
autoComplete(){
this.results = [];
if(this.query.length > 2){
axios.get('/api/kudos', {params: {query: this.query}}).then(response => {
this.results = response.data;
});
}
}
}
}
</script>
search.blade.php
<your-component></your-component>

Answer 2

Add the name of your data in your response
<script>
export default {
data(){
return {
kudos : []
}
},
created(){
axios.get('./api/kudos')
.then(response => this.kudos = response.data.NameOfYourData);
}
}
</script>