fix(VDataTable): emit pagination event when filtering (#10651)

closes #10212
vuetifyjs · Feb 25, 2020 · 7856dba · 7856dba
1 parent 4d04771
commit 7856dba
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VData/VData.ts b/packages/vuetify/src/components/VData/VData.ts
@@ -192,7 +192,6 @@ export default Vue.extend({
       handler (options: DataOptions, old: DataOptions) {
         if (deepEqual(options, old)) return
         this.$emit('update:options', options)
-        this.$emit('pagination', this.pagination)
       },
       deep: true,
       immediate: true,
@@ -257,6 +256,12 @@ export default Vue.extend({
       },
       immediate: true,
     },
+    pagination: {
+      handler () {
+        this.$emit('pagination', this.pagination)
+      },
+      immediate: true,
+    },
   },
 
   methods: {

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
@@ -732,4 +732,63 @@ describe('VDataTable.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/10392
+  it('should emit pagination event when filtering', async () => {
+    const headers = [
+      {
+        text: 'Name',
+        value: 'name',
+      },
+      {
+        text: 'ID',
+        value: 'id',
+      },
+    ]
+
+    const items = [
+      {
+        name: 'Assistance',
+        id: 1,
+      },
+      {
+        name: 'Candidat',
+        id: 2,
+      },
+    ]
+
+    const pagination = jest.fn()
+
+    const wrapper = mountFunction({
+      propsData: {
+        headers,
+        items,
+        itemKey: 'id',
+      },
+      listeners: {
+        pagination,
+      },
+    })
+
+    expect(pagination).toHaveBeenLastCalledWith({
+      itemsLength: 2,
+      itemsPerPage: 10,
+      page: 1,
+      pageCount: 1,
+      pageStart: 0,
+      pageStop: 2,
+    })
+
+    wrapper.setProps({ search: 'candidat' })
+    await wrapper.vm.$nextTick()
+
+    expect(pagination).toHaveBeenLastCalledWith({
+      itemsLength: 1,
+      itemsPerPage: 10,
+      page: 1,
+      pageCount: 1,
+      pageStart: 0,
+      pageStop: 1,
+    })
+  })
 })