T
TanStack•3y ago
conscious-sapphire

Infinite Renders in Vue

Due to Vue's ref's it seems that the only way to dynamically pass data to useVueTable is if I define getters, which can be annoying due to extra lines. However, it seems that if anything happens inside these getters the entire page freezes.
1 Reply
conscious-sapphire
conscious-sapphireOP•3y ago
I seem to have fixed it, but there must be a better way for the adapter to handle ref's. Using getters can get a little tedious, and make the code clunky. The following adapter will convert options passed to useVueTable that are ref's, to getters automatically. 
import { isRef } from 'vue'

export const tanstackAdapter = opts => {
  const options = { ...opts }
  const traverse = obj => {
    for (const k in obj) {
      if (isRef(obj[k])) {
        const ref = obj[k]
        Object.defineProperty(obj, k, { get () { return ref.value } })
      } else if (typeof obj[k] === 'object') traverse(obj[k])
    }
  }
  traverse(options)
  return options
}
import { isRef } from 'vue'

export const tanstackAdapter = opts => {
  const options = { ...opts }
  const traverse = obj => {
    for (const k in obj) {
      if (isRef(obj[k])) {
        const ref = obj[k]
        Object.defineProperty(obj, k, { get () { return ref.value } })
      } else if (typeof obj[k] === 'object') traverse(obj[k])
    }
  }
  traverse(options)
  return options
}

Did you find this page helpful?