fix: use deep watch instead of cimputed for data update

Author: kouts

playground/layouts/default/DefaultNav.vue

@@ -16,10 +16,10 @@
       <div id="navbarDefault" :class="['collapse navbar-collapse', navbarExpanded && 'show']">
         <ul class="navbar-nav mr-auto">
           <li class="nav-item">
-            <router-link to="/" class="nav-link" @click="collapseNavbar">Example1</router-link>
+            <router-link to="/" class="nav-link" @click="collapseNavbar">Options API</router-link>
           </li>
           <li class="nav-item">
-            <router-link to="/example2" class="nav-link" @click="collapseNavbar">Example2</router-link>
+            <router-link to="/composition-api" class="nav-link" @click="collapseNavbar">Composition API</router-link>
           </li>
         </ul>
       </div>

playground/router/index.js

@@ -1,23 +1,23 @@
-import Example1 from '../views/Example1.vue'
+import OptionsApi from '../views/OptionsApi.vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 const history = createWebHashHistory()
 const routes = [
   {
     path: '/',
-    name: 'Example1',
-    component: Example1,
+    name: 'OptionsApi',
+    component: OptionsApi,
     meta: {
       layout: 'default'
     }
   },
   {
-    path: '/example2',
-    name: 'Example2',
+    path: '/composition-api',
+    name: 'CompositionApi',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "example2" */ '../views/Example2.vue'),
+    component: () => import(/* webpackChunkName: "composition-api" */ '../views/CompositionApi.vue'),
     meta: {
       layout: 'default'
     }

playground/views/Example2.vue playground/views/CompositionApi.vue

@@ -5,6 +5,8 @@
       <button type="button" class="btn btn-primary ml-1" @click="setData1">Set users 1</button>
       <button type="button" class="btn btn-primary ml-1" @click="setData2">Set users 2</button>
       <button type="button" class="btn btn-primary ml-1" @click="setDataAll">Set users all</button>
+      <button type="button" class="btn btn-primary ml-1" @click="addOne">Add one user</button>
+      <button type="button" class="btn btn-primary ml-1" @click="removeOne">Remove one user</button>
     </div>
     <dataset
       v-slot="{ ds }"
@@ -69,6 +71,24 @@ const users2 = clone(jsonUsers).slice(13, 25)
 const usersAll = clone(jsonUsers)
 
 const users = ref([])
+
+const user = {
+  _id: 'EA265B20-45F2-953C-C534-3E2A78620ins',
+  isActive: true,
+  onlineStatus: 'Do not disturb',
+  balance: 10000,
+  birthdate: '1978-12-24',
+  favoriteColor: 'orredange',
+  firstName: 'Inserted',
+  lastName: 'User',
+  name: 'Inserted User',
+  company: 'Inserted AG',
+  email: '[email protected]',
+  phone: '(0112) 192 5651',
+  address: 'P.O. Box 98, 571 Inserted Rd.',
+  favoriteAnimal: 'cat'
+}
+
 const statusClass = {
   Active: 'text-success',
   Away: 'text-warning',
@@ -92,4 +112,12 @@ const setDataAll = () => {
 const updateDsData = (data) => {
   console.log(data)
 }
+
+const addOne = () => {
+  users.value.unshift(user)
+}
+
+const removeOne = () => {
+  users.value.splice(0, 1)
+}
 </script>

playground/views/Example1.vue playground/views/OptionsApi.vue

@@ -5,6 +5,8 @@
       <button type="button" class="btn btn-primary ml-1" @click="setData1">Set users 1</button>
       <button type="button" class="btn btn-primary ml-1" @click="setData2">Set users 2</button>
       <button type="button" class="btn btn-primary ml-1" @click="setDataAll">Set users all</button>
+      <button type="button" class="btn btn-primary ml-1" @click="addOne">Add one user</button>
+      <button type="button" class="btn btn-primary ml-1" @click="removeOne">Remove one user</button>
     </div>
     <dataset
       v-slot="{ ds }"
@@ -13,6 +15,7 @@
       :ds-sortby="['name']"
       :ds-search-in="['balance', 'birthdate', 'name', 'company', 'email', 'phone', 'address', 'favoriteAnimal']"
       :ds-search-as="{}"
+      @update:ds-data="updateDsData"
     >
       <div class="row mb-2" :data-page-count="ds.dsPagecount">
         <div class="col-md-6 mb-2 mb-md-0">
@@ -66,6 +69,23 @@ const users1 = clone(jsonUsers).slice(0, 12)
 const users2 = clone(jsonUsers).slice(13, 25)
 const usersAll = clone(jsonUsers)
 
+const user = {
+  _id: 'EA265B20-45F2-953C-C534-3E2A78620ins',
+  isActive: true,
+  onlineStatus: 'Do not disturb',
+  balance: 10000,
+  birthdate: '1978-12-24',
+  favoriteColor: 'orredange',
+  firstName: 'Inserted',
+  lastName: 'User',
+  name: 'Inserted User',
+  company: 'Inserted AG',
+  email: '[email protected]',
+  phone: '(0112) 192 5651',
+  address: 'P.O. Box 98, 571 Inserted Rd.',
+  favoriteAnimal: 'cat'
+}
+
 export default {
   name: 'Home',
   data() {
@@ -89,6 +109,15 @@ export default {
     },
     setDataAll() {
       this.users = usersAll
+    },
+    updateDsData(data) {
+      console.log(data)
+    },
+    addOne() {
+      this.users.unshift(user)
+    },
+    removeOne() {
+      this.users.splice(0, 1)
     }
   }
 }

src/Dataset.vue

@@ -85,19 +85,6 @@ export default {
       dsPage.value = value
     }
 
-    const whenChanged = computed(() => {
-      /* eslint-disable no-unused-expressions */
-      props.dsData
-      dsSearch.value
-      props.dsSortby
-      props.dsFilterFields
-      props.dsSearchIn
-      props.dsSearchAs
-      props.dsSortAs
-
-      return Date.now()
-    })
-
     const dsRows = computed(() => {
       return dsIndexes.value.slice(dsFrom.value, dsTo.value)
     })
@@ -128,8 +115,8 @@ export default {
     })
 
     watch(
-      whenChanged,
-      (newVal, oldVal) => {
+      () => [props.dsData, dsSearch, props.dsSortby, props.dsFilterFields, props.dsSearchIn, props.dsSearchAs, props.dsSortAs],
+      () => {
         let result = []
 
         if (!dsSearch.value && !props.dsSortby.length && isEmptyObject(props.dsFilterFields)) {
@@ -165,7 +152,8 @@ export default {
         )
       },
       {
-        immediate: true
+        immediate: true,
+        deep: true
       }
     )
 

tests/unit/Dataset.spec.js

@@ -5,6 +5,7 @@ import DatasetPager from '@/DatasetPager.vue'
 import DatasetSearch from '@/DatasetSearch.vue'
 import DatasetShow from '@/DatasetShow.vue'
 import { mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
 
 import users from '../../example-data/users.json'
 import { clone, waitNT } from '../../tests/utils.js'
@@ -168,4 +169,55 @@ describe('Dataset', () => {
 
     expect(wrapper.emitted()['update:dsData'][1][0]).toHaveLength(4)
   })
+
+  it('updates when a new object is pushed or deleted', async () => {
+    const Container = {
+      template: `
+        <Dataset :ds-data="datasetUsers">
+          <DatasetItem>
+            <template #default="{ row, rowIndex }">
+              <div class="name">{{ row.name }}</div>
+            </template>
+            <template #noDataFound>
+              <p class="text-center">No results found</p>
+            </template>
+          </DatasetItem>
+        </Dataset>
+      `,
+      components: { Dataset, DatasetItem },
+      setup() {
+        const datasetUsers = ref([])
+
+        const addOne = () => {
+          const oneUser = { name: 'George' }
+
+          datasetUsers.value.unshift(oneUser)
+        }
+
+        const removeOne = () => {
+          datasetUsers.value.splice(0, 1)
+        }
+
+        return {
+          datasetUsers,
+          addOne,
+          removeOne
+        }
+      }
+    }
+
+    const wrapper = mount(Container)
+
+    wrapper.vm.addOne()
+
+    await nextTick()
+
+    expect(wrapper.find('.name').text()).toBe('George')
+
+    wrapper.vm.removeOne()
+
+    await nextTick()
+
+    expect(wrapper.find('p.text-center').text()).toBe('No results found')
+  })
 })