fix(VDataTable): items-per-page event should not emit immediately (#9615)

closes #9599

Author: nekosaur

packages/vuetify/src/components/VData/VData.ts

@@ -222,11 +222,8 @@ export default Vue.extend({
     itemsPerPage (itemsPerPage: number) {
       this.updateOptions({ itemsPerPage })
     },
-    'internalOptions.itemsPerPage': {
-      handler (itemsPerPage: number) {
-        this.$emit('update:items-per-page', itemsPerPage)
-      },
-      immediate: true,
+    'internalOptions.itemsPerPage' (itemsPerPage: number) {
+      this.$emit('update:items-per-page', itemsPerPage)
     },
     sortBy (sortBy: string | string[]) {
       this.updateOptions({ sortBy: wrapInArray(sortBy) })

packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts

@@ -509,45 +509,51 @@ describe('VDataTable.ts', () => {
 
   // https://github.com/vuetifyjs/vuetify/issues/8184
   it('should default to first option in itemsPerPageOptions if it does not include itemsPerPage', async () => {
-    const itemsPerPage = jest.fn()
-    const options = jest.fn()
     const wrapper = mountFunction({
       propsData: {
         headers: testHeaders,
         items: testItems,
         footerProps: {
-          itemsPerPageOptions: [5, 6],
+          itemsPerPageOptions: [6, 7],
         },
       },
-      listeners: {
-        'update:items-per-page': itemsPerPage,
-        'update:options': options,
-      },
     })
 
-    expect(itemsPerPage).toHaveBeenCalledWith(5)
-    expect(options).toHaveBeenCalledWith(expect.objectContaining({
-      itemsPerPage: 5,
-    }))
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8817
   it('should handle object when checking if it should default to first option in itemsPerPageOptions', async () => {
-    const itemsPerPage = jest.fn()
     const wrapper = mountFunction({
       propsData: {
         headers: testHeaders,
         items: testItems,
         itemsPerPage: -1,
         footerProps: {
-          itemsPerPageOptions: [5, 6, { text: 'All', value: -1 }],
+          itemsPerPageOptions: [6, { text: 'All', value: -1 }],
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9599
+  it('should not immediately emit items-per-page', async () => {
+    const itemsPerPage = jest.fn()
+    const wrapper = mountFunction({
+      propsData: {
+        headers: testHeaders,
+        items: testItems,
+        footerProps: {
+          itemsPerPageOptions: [6, 7],
         },
       },
       listeners: {
-        'update:items-per-page': itemsPerPage,
+        'update:itemsPerPage': itemsPerPage,
       },
     })
 
-    expect(itemsPerPage).toHaveBeenCalledWith(-1)
+    expect(itemsPerPage).not.toHaveBeenCalled()
   })
 })