N
Nuxt•2mo ago
23brewert

Nuxt UI Table disappears when using mutable field ref()

Hello All, I am running into an issue where nuxt ui tables disappear after receiving data. I have been pulling my hair out trying to figure out why, there is no error, or warnings. Here is what I have tried so far: - Initializing a ref() with static data - works - Print ref value after setting the data after $fetch request - prints the mutable object and raw json when stringified [but the table disappears] Does anyone know what could be going on? Here is my full script: 
<template>
  <div>
    <h1>Example using ref</h1>
    <UTable :data="products" :loading="productsLoading" class="flex-1 max-h-[312px]" />
    {{ products }}
    <h1>Example using static data</h1>
    <UTable :data="[
      { name: 'Product 1', price: '$10', description: 'Description of Product 1' },
      { name: 'Product 2', price: '$20', description: 'Description of Product 2' },
      { name: 'Product 3', price: '$30', description: 'Description of Product 3' }
    ]" class="flex-1 max-h-[312px]" />
  </div>
</template>
<script lang="ts" setup>
definePageMeta({
  middleware: ['auth']
})

const toast = useToast()
const products = ref()
const productsLoading = ref(true)

async function initProducts() {
  try {
    productsLoading.value = true
    let resp = await $fetch('/api/staff/products', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log('Products response:', JSON.stringify(resp))
    products.value = JSON.parse(JSON.stringify(resp)).items
    console.log('Products fetched:', products.value)
  } catch (error) {
    toast.add({
      title: 'Error fetching products',
      description: 'There was an error fetching the products. Please try again later.',
      color: 'error'
    })
  } finally {
    productsLoading.value = false
  }

}

if (import.meta.client) {
  initProducts()
}

</script>
<template>
  <div>
    <h1>Example using ref</h1>
    <UTable :data="products" :loading="productsLoading" class="flex-1 max-h-[312px]" />
    {{ products }}
    <h1>Example using static data</h1>
    <UTable :data="[
      { name: 'Product 1', price: '$10', description: 'Description of Product 1' },
      { name: 'Product 2', price: '$20', description: 'Description of Product 2' },
      { name: 'Product 3', price: '$30', description: 'Description of Product 3' }
    ]" class="flex-1 max-h-[312px]" />
  </div>
</template>
<script lang="ts" setup>
definePageMeta({
  middleware: ['auth']
})

const toast = useToast()
const products = ref()
const productsLoading = ref(true)

async function initProducts() {
  try {
    productsLoading.value = true
    let resp = await $fetch('/api/staff/products', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log('Products response:', JSON.stringify(resp))
    products.value = JSON.parse(JSON.stringify(resp)).items
    console.log('Products fetched:', products.value)
  } catch (error) {
    toast.add({
      title: 'Error fetching products',
      description: 'There was an error fetching the products. Please try again later.',
      color: 'error'
    })
  } finally {
    productsLoading.value = false
  }

}

if (import.meta.client) {
  initProducts()
}

</script>
No description
No description
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @23brewert. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—where the Nuxt UI Table disappears after setting data from a fetch—most likely stems from the structure or type of the data you assign to the table's data prop. Key points from the Nuxt UI Table documentation: - The data prop for <UTable> must be an array of objects. If you pass undefined, null, or a non-array value, the table will not render any rows, and may appear to "disappear" without errors or warnings. - Initializing with static data works because it's always an array. When you fetch data, if products.value is not an array (e.g., it's undefined, null, or an object), the table will not display anything. - The table expects the array to be present immediately or after loading; if you set products.value = undefined or a non-array during loading, it will not render rows until a valid array is assigned Nuxt UI Table: Data. What to check: 1. Check the structure of your API response.
In your code, you do: 
   products.value = JSON.parse(JSON.stringify(resp)).items
   
   products.value = JSON.parse(JSON.stringify(resp)).items
If resp.items is not an array, or if resp is not the expected object, products.value will not be an array. 2. Initialize your ref as an empty array.
This ensures the table always has a valid array to work with, even before data is loaded: 
   const products = ref([])
   
   const products = ref([])
3. Assign the fetched array directly.
If your API returns { items: [...] }, you should do: 
   products.value = resp.items
   
   products.value = resp.items
Avoid unnecessary serialization/deserialization unless you have a specific reason. 4. Debug the response.
Log resp and resp.items to ensure you are assigning an array: 
   console.log('API response:', resp)
   console.log('Items:', resp.items)
   
   console.log('API response:', resp)
   console.log('Items:', resp.items)
Example fix: 
const products = ref([]) // Always an array

async function initProducts() {
  try {
    productsLoading.value = true
    let resp = await $fetch('/api/staff/products', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    // Make sure resp.items is an array
    products.value = Array.isArray(resp.items) ? resp.items : []
  } catch (error) {
    // ...error handling...
  } finally {
    productsLoading.value = false
  }
}
const products = ref([]) // Always an array

async function initProducts() {
  try {
    productsLoading.value = true
    let resp = await $fetch('/api/staff/products', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    // Make sure resp.items is an array
    products.value = Array.isArray(resp.items) ? resp.items : []
  } catch (error) {
    // ...error handling...
  } finally {
    productsLoading.value = false
  }
}
Summary:
The Nuxt UI Table requires the data prop to always be an array. If you assign undefined, null, or a non-array, the table will not render. Always initialize your ref as an array and ensure the fetched data is also an array before assigning it Nuxt UI Table: Data. If you follow these steps and the issue persists, double-check the shape of your API response and how you assign it to products.value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@345465284582178826> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
23brewert
23brewertOP•2mo ago
FYI: I did check the request data [See print out in photos]

Did you find this page helpful?