Question

我尝试使用vuejs和laravel 5.3构建即时搜索但不知何故它不会工作没有错误显示

Controller（fullcode 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);
        },

Blade（fullcode 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');

正确显示的数据（通过从/ staffitems获取json响应进行测试？page = 1＆amp; search = jon有或没有搜索值），但不知何故，当我在输入搜索列中输入要搜索的单词时，没有任何事情发生我完成了输入，可能是刀片中的事件处理错误或者我的方法在staff.js中有任何解决方案吗？

Answer 1

您应该在mounted()方法中添加去抖动：

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

Answer 2

要构建真正有效的即时数据库搜索，您应该考虑将pusher和laravel echo与vuex一起使用

您可以查看此>>> Ethiel Adiassa's Live Search Tutorial with laravel and pusher

Answer 3

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

v-on:keyup='vueGetItems'

因为您的即时搜索仅在输入密钥时触发。我希望这可以工作或联系我以获得完整的工作代码。

使用keyup vuejs和laravel进行即时搜索

3 个答案: