Question

我想用ajax和vue建立搜索。

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

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

www.grapes.com

这是我的路线

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

我有一个search.vue

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

如果我输入字母，我认为是可重复使用的，但是它向我显示了10000个带有空结果的列表点

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

如果我这样做：

<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>

我得到结果：

Array（0）

并且关键字有效

Answer 1

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>

Answer 2

我知道了：）

控制器：

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”：）

使用Laravel和Vue的AJAX搜索为空结果

2 个答案: