AJAX 搜索与 Laravel 和 Vue 空结果

Question

我想用 ajax 和 vue 构建搜索。

所以我的所有文件都有一个名为“文件”的模型

然后我有一个名为 searchcontroller.php 的控制器

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>

如果我输入一个字母，我认为 resposce 工作，但它显示了 10000 个列表点，结果为空

我想这样做：https://jsfiddle.net/hej7L1jy/2/

如果我这样做：

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

我得到结果：

数组(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>

我在控制器中编辑了 where 函数，我需要一个“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>