Как получить данные с помощью Vue Js laravel

Question

Как получить данные, используя vue js и laravel. Я создал компонент Vue и контроллер.

Вот моя структура таблицы базы данных

<script>
export default {

    data(){
        return {
            kudos : []
        }
    },
    created(){
        axios.get('./api/kudos')
        .then(response => this.kudos = response.data);
    }
}
</script>

Что мне нужно сделать, это получить данные базы данных в блейд-файл, используя vuejs. Может ли кто-нибудь вести меня шаг за шагом?

1. Контроллер
2. Vue Component
3. Файл Blade

Answer 1

Я думаю, вы ищете что-то вроде этого?

Контроллер:

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>