使用Keyup Vuejs和Laravel即时搜索

Question

我试图使用vuejs和laravel 5.3构建即时搜索

控制器(完整代码https://pastebin.com/6mq4ewtf(：

public function index(Request $request) {
        $search = $request->search;
        $items = Staff::where('nama', 'LIKE', '%'.$search.'%')->paginate(5);
        $response = [
            'pagination' => [
                'total'        => $items->total(),
                'per_page'     => $items->perPage(),
                'current_page' => $items->currentPage(),
                'last_page'    => $items->lastPage(),
                'from'         => $items->firstItem(),
                'to'           => $items->lastItem()
            ],
            'data'       => $items
        ];  

Staff.js方法(完整代码https://pastebin.com/ndxzqsyp(：

methods: {
        getVueItems: function (page) {
            this.$http.get('/staffitems?page=' + page + '&search=' + this.search).then((response) => {
                this.$set('items', response.data.data.data);
                this.$set('pagination', response.data.pagination);
            });
            setTimeout(this.getVueItems, 5000);
        },

刀片(完整代码https://pastebin.com/6udzrrye(：

<input v-on:keyup.enter="getVueItems" type="text" class="form-control" name="search" placeholder="Cari..." v-model="search"/>  

路由：

Route::get('/staffcrud', 'StaffController@Crud');
Route::resource('/staffitems', 'StaffController');

正确显示的数据(通过/sufferitems获得JSON响应？Page = 1＆amp; search = Jon = JON带有或不带有搜索值的JON(，但是当我以某种方式在输入搜索列中键入搜索单词时，什么都不会发生我完成了键入，可能在刀片中进行的事件处理是错误的，或者我的方法在工作人员中。

您应该在 mounted()方法中添加调试：

mounted() {
    this.getVueItems = _.debounce(this.getVueItems, 5000); // i'm using lodash here.
}

要构建一个非常有效的即时数据库搜索，您应该考虑将Pusher和Laravel Echo与VUEX

一起使用

您可以与Laravel和Pusher

一起查看>>> Ethiel Adiassa的实时搜索教程

在您的刀片模板中仅使用：

v-on:keyup='vueGetItems'

因为您的即时搜索仅在输入密钥上发射。我希望这将有效或与我联系以获取完整的工作代码。