Update dataset item

[BossHogg97]

Hi, i'm workin on Vue 3.2 + naiveUI. The dataset is working fine in dev environment but when i build the web app (production env) the dataset doesn't update reactive but i have to reload the page when i add a new item to array of object.

Main .vue component instructions:

// Dataset definition:
let dsRollType = reactive<dsRollTypeBase[]>([])

onBeforeMount(async () => {
    dsRollType = (await getRollTypes()).data
})

Dataset component definition on template

<dataset v-slot="{ ds }" :ds-data="dsRollType" :ds-filter-fields="dsFilterFields" :ds-search-in="['name', 'description', 'id']" :ds-search-as="{}">

The following function is from external class:

private liveModelAdd(dsRollType: any, row: rsRollType) {
    const newElementBase = this.createCardObject(row)
    dsRollType.push(newElementBase)
  }

Is there also a way to delete an item from dataset without reload the page?

Thanks

[kouts]

Hey @BossHogg97 , is there any way you can reproduce the issue with a Stackblitz or a Codesandbox?

There's a Stackblitz here that you can use as a reference: https://stackblitz.com/edit/vue-w4juwm?file=src/App.vue and 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

[BossHogg97]

HI! Yesterday I found a solution for my problem. I did a "push" on adding an element when I had to reassign the new array to the dataset. I didn't understand why in the development environment everything worked fine and in production it didn't but ok :)

I show the code if someone need it:

dsAdd(dsRollType: any, row: rsRollType) {
    const newElementBase = this.createCardObject(row)
    dsRollType.value = [...dsRollType.value, newElementBase]
  }

  dsUpdate(dsRollType: any, row: rsRollType) {
    const updatedElement = this.createCardObject(row)
    const index = dsRollType.value.findIndex((object) => {
      return object.id === row.id
    })

    const tempDataset = dsRollType.value
    tempDataset.splice(index, 1, updatedElement)
    dsRollType.value = [...tempDataset]
  }

  dsDelete(dsRollType: any, id: string) {
    const index = dsRollType.value.findIndex((object) => {
      return object.id === id
    })

    const tempDataset = dsRollType.value
    tempDataset.splice(index, 1)
    dsRollType.value = [...tempDataset]
  }

Thanks ;)