Warning: When VueJs OnMount props is utilized, it might display a message stating, "Expected Object, received Undefined."

Question

Warning: When VueJs OnMount props is utilized, it might display a message stating, "Expected Object, received Undefined."

This is my current component setup:

<template>
  <Grid :items="items" />
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import Grid from '@/components/Grid.vue'
  import { getData } from '@/services/getData'

  const items = ref()

  onMounted(async () => {
    items.value = await getData()
 })
</script>

The Grid component depends on the items property to display data. However, I encounter a warning stating

type check failed for prop "items". Expected Object, got Undefined

. This occurs because items is undefined before getData() is called. How can I ensure that getData() is executed before this error is triggered?

javascript vue.js

Answer 1

Answer №1

In the case that Grid depends on a specific value, it should not be displayed until that value has been set.

You can approach this in one of two ways:

<Grid v-if="items" :items="items" />

Alternatively:

const items = ref()
items.value = await fetchData()

The second option will make the component asynchronous and will require the use of <Suspense> in parent components.

Answer 2

In the case that Grid depends on a specific value, it should not be displayed until that value has been set.

You can approach this in one of two ways:

<Grid v-if="items" :items="items" />

Alternatively:

const items = ref()
items.value = await fetchData()

The second option will make the component asynchronous and will require the use of <Suspense> in parent components.

Answer 3

Answer №2

Prior to loading the data, the value of items.value is set to undefined, resulting in an error. To avoid this issue, initialize it as follows:

const items = ref(<object>)

Replace <object> with the appropriate format (such as an object with specific structure or empty) or an array to populate the grid initially.

Answer 4

Prior to loading the data, the value of items.value is set to undefined, resulting in an error. To avoid this issue, initialize it as follows:

const items = ref(<object>)

Replace <object> with the appropriate format (such as an object with specific structure or empty) or an array to populate the grid initially.

Warning: When VueJs OnMount props is utilized, it might display a message stating, "Expected Object, received Undefined."

Answer №1

Answer №2

Similar questions

How to extract a JavaScript object from an array using a specific field

Issue with alignment in the multiselect filter of a React data grid

Enhancing Next.js Images with Custom CSS Styles

Trouble deploying Firebase Cloud Functions

Angular 4 - Issues with route configurations

"Troubleshooting: Why isn't my jQuery AJAX POST request successfully sending data to

Validating forms using Ajax in the Model-View-Controller

Background image not displaying in new tab after Chrome extension installation

Having trouble with npm global installation? Encountering the error message "Error: EACCES: permission denied

Ways to refine data using multiple criteria

What is the method for retrieving the name of the currently selected HTML element?

Retrieve the 'current' scope using a 'master' controller

Utilize Yandex Translate API in VueJS to asynchronously detect languages

Angular Custom Chain Filtering: A Unique Approach

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

Ways to create collapsible navigation bars in your website

Executing a search and replace function using a delay within a foreach loop - the ultimate guide

utilize ajax success method to extract json data

"An error occurred with the Ajax post request - bad request

"error: unable to retrieve message channel name, result is undefined