vue-dataset is not reactive

[Leon0824]

I am using vue-dataset for Vue.js 3.

In this case, vue-dataset does not show any data, only 'No results found'.

<script setup lang='ts'>
import { Dataset, DatasetInfo, DatasetItem, DatasetPager, DatasetSearch, DatasetShow } from 'vue-dataset';
import { dataService } from '../client';

import { onBeforeMount, ref, reactive } from 'vue';

let itemId = 123;
let itemData = reactive( [] );

onBeforeMount( async () => {
  dataArray = await dataService.getItemData( itemId );
  for ( let dataEntry of dataArray ) { itemData.push( { attrA: dataEntry.a, attrB: dataEntry.b } ) }
});
</script>

<template>
<dataset v-slot=" { ds } " :ds-data=" itemData ">
  <dataset-item>
    <template #default=" { row, roIndex, index } ">
      <div>{{ row.attrA }}</div>
      <div>{{ row.attrB }}</div>
    </template>

    <template #noDataFound>
      <p>No results found</p>
    </template>
  </dataset-item>
</dataset>
</template>

[kouts]

Hello @Leon0824 I think that this should probably work, at least when setting the whole array. Can you post a Stackblitz or Codesandbox example? You can use something like this for a template https://stackblitz.com/edit/vue-tnwd27?file=src/App.vue

[gdois]

We tried to use it here in the company the same way, using .push and it didn't update the reactive data.

@kouts

[kouts]

I've created a StackBlitz here that sets the data after 3 seconds https://stackblitz.com/edit/vue-w4juwm?file=src/App.vue it seems to work fine. There are also unit tests covering this exact case, make sure your data is reactive.

[Leon0824]

Here is a good article - The correct way to force Vue to re-render a component.

My solution is add a 'key' to dataset.

<script setup lang="ts">
// import XXX

const dsReRenderKey = ref( 0 ); // The 'KEY' to update vue-dataset.

onBeforeMount( async () => {
  dataArray = await dataService .getItemData( itemId );
  for ( let dataEntry of dataArray ) { itemData.push( { attrA: dataEntry.a, attrB: dataEntry.b } ) }
  dsReRenderKey.value += 1; // To force Vue.js to re-render the component.
});
</script>

<template>
  <dataset v-slot=" { ds } " :ds-data=" itemData " :key=" dsReRenderKey ">
    <dataset-item>
      <template #default=" { row, roIndex, index } ">
        <div>{{ row.attrA }}</div>
        <div>{{ row.attrB }}</div>
      </template>
    </dataset-item>
  </dataset>
</template>

[ravelinodecastro]

Try like this:

import {ref} from "vue";

const data = ref([

]);

setTimeout(() => {
    data.value = [
        {
            id: 1,
            name: "Ravelino de Castro",
            position: "Software Developer"
        }
    ]
}, 5000);

[kouts]

There's now an example in the playground that covers setting the data using the composition API. You can check it here: https://github.com/kouts/vue-dataset/blob/next/playground/views/Example2.vue

There's also the Stackblitz here as a reference: https://stackblitz.com/edit/vue-w4juwm?file=src/App.vue

[github-actions[bot]]

:tada: This issue has been resolved in version 3.5.2 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: