AJAX Поиск с Laravel и Vue пустым Результаты

Question

Я хочу построить поиск с помощью ajax и vue.

Итак, у меня есть модель с именем "file", здесь все мои файлы

, тогда у меня есть контроллер с именем searchcontroller.php * 1005.*

public function search(Request $request)
{
    $files = File::where('name', $request->keywords)->get();
    return response()->json($files);
}

это мой маршрут

Route::post('/', 'SearchController@search');

, и у меня есть search.vue

<template>
<div>
    <input type="text" v-model="keywords">
    <ul v-if="results.length > 0">
        <li v-for="result in results" :key="result.id" v-text="result.name"></li>
    </ul>
</div>
</template>
<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },

    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },

    methods: {
        fetch() {
            axios.get('/', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }

    }

}
</script>

если я наберу букву, я думаю, что работа по восстановлению, но она показывает мне10000 пунктов списка с результатом emtpy

Я хочу сделать это, как здесь: https://jsfiddle.net/hej7L1jy/2/

, если я сделаю:

console.log(this.results);
console.log(this.keywords);

я получаю за результаты:

Array (0)

и ключевое слово работает

Answer 1

Я получил его:)

Контроллер:

public function search(Request $request)
{
    $files = DB::table('files')->where('name', 'like', '%' . $request->get('keywords') . '%')->get();
    return response()->json($files);
}

Маршрут:

Route::get('/search', 'SearchController@search');

Vue:

<template>
<div>
    <input type="text" v-model="keywords">
    <ul v-if="results.length > 0">
        <li v-for="result in results" :key="result.id">{{ result.name }}</li>
    </ul>
</div>

</template>

<script>
    export default {
        data() {
            return {
                keywords: null,
                results: []
            };
        },

        watch: {
            keywords(after, before) {
                this.fetch();
            }
        },

        methods: {
            fetch() {
                axios.get('/search', { params: { keywords: this.keywords } })
                    .then(response => this.results = response.data)
                    .catch(error => {});
            }

        }
    }
    </script>

я редактировалгде функция в моем контроллере, и мне нужен метод "get", а не "post":)

Answer 2

public function search(Request $request)
{
    $files = File::where('name', 'like', '%' . $request->get('keywords') . '%')->get();

    return response()->json($files);
}

<template>
<div>
    <input type="text" v-model="keywords">
    <ul v-if="results.length > 0">
        <li v-for="result in results" :key="result.id">{{ result.name }}</li>
    </ul>
</div>
</template>
<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },

    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },

    methods: {
        fetch() {
            axios.post('/', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }

    }
}
</script>