无法使用vue.js搜索整个日期

Question

在我的控制器中，这是代码。

public function index(Request $request) {
        $items = Task::orderBy('created_at', 'asc')->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,
        ];

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

我认为这是原因。但是当我在不使用分页的情况下获得所有数据时。分页已被打破。

以下是我在Vue.js中使用的代码。

搜索工作正常。

搜索正在处理仅在分页中的数据。但无法搜索整个数据。即使没有在页面中列出。

Task 6 - Is in the Page 1 and can be search
Task 7 - Not in the Page 1 but listed in Page 2 but cannot be search.

代码中缺少什么。谢谢你的帮助：）

Answer 1

items只包含完整列表中的一个“页面”，因此如果您要搜索整个数据，则必须在分页之前应用过滤器。

如何执行此操作取决于数据的来源 - 您可以创建应用搜索过滤器的计算属性filteredItems，然后将表行更改为：

<tr v-for="item in filteredItems" :key="item.foo">