T
TanStack•11mo ago
modern-teal

Computed Data doesn't update properly (Vue reactivity issue)

Hey again, I'm not sure if I'm doing something wrong but my data does not seem to update properly for some reason. Whenever I add or remove data from the array my computedData updates just fine (checked via Vue DevTools) but the table is only updated partially. 
// Precompute the netTotal and profit for each item in the data
const dataWithComputedValues = computed(() => {
  if (!props.table?.items) {
    return []
  }
  console.log('dataWithComputedValues called')
  const data = props.table.items.map((item) => {
    console.log(`-> Item: ${item.name} OrderIndex: ${item.orderIndex}`)
    const netTotal = calculateNetTotal(item)
    const costNetTotal = item.costNetTotal || 0
    const profit = (netTotal || 0) - costNetTotal

    return {
      ...item,
      netTotal,
      profit,
    }
  })
  console.log('new dataWithComputedValues', data) // Shows me the correct data when props.table changes
  return data
})

const table = useVueTable({
  data: dataWithComputedValues,
  columns, //: mergedColumns,
  defaultColumn,
  // ...
})
// Precompute the netTotal and profit for each item in the data
const dataWithComputedValues = computed(() => {
  if (!props.table?.items) {
    return []
  }
  console.log('dataWithComputedValues called')
  const data = props.table.items.map((item) => {
    console.log(`-> Item: ${item.name} OrderIndex: ${item.orderIndex}`)
    const netTotal = calculateNetTotal(item)
    const costNetTotal = item.costNetTotal || 0
    const profit = (netTotal || 0) - costNetTotal

    return {
      ...item,
      netTotal,
      profit,
    }
  })
  console.log('new dataWithComputedValues', data) // Shows me the correct data when props.table changes
  return data
})

const table = useVueTable({
  data: dataWithComputedValues,
  columns, //: mergedColumns,
  defaultColumn,
  // ...
})
Via console I can see that adding and removing items works fine but the table adds and removes other items with different names and such. Has anyone experienced something similar? When I do a full page refresh everything's displayed just fine.
1 Reply
modern-teal
modern-tealOP•11mo ago
Ok, been rubber-ducking this issue and apparently the table is getting the data just fine. The issue is within my component that displays the data which is stuck on the "old" data. Therefore: Closed 🙂

Did you find this page helpful?