[Vuejs]-How to pass an Object as a prop in Vue js?

by

0👍

✅

Passing an object as a prop in Vue.js is similar to passing other types of props, but there might be an issue with how you are using it.

First, make sure you are correctly passing the info prop from the parent component to the child component in the template where the child component is used.

For example, if you are using the child component in the parent component’s template, you should pass the info prop like this:

<template>
  <child-component :info="infoObject" />
</template>

Next, make sure that the infoObject exists and is defined in the parent component’s data.

export default {
  data() {
    return {
      infoObject: {
        text: 'Some text',
        // other properties...
      },
    };
  },
};

Now, in your child component, you can access the info prop and use it as follows:

<template>
  <p>{{ info.text }}</p>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    console.log(this.info); // Should print the infoObject with text property
  },
};
</script>

By following these steps, you should be able to pass an object as a prop and access its properties in your child component. If you are still getting undefined, please double-check that you are correctly passing the prop from the parent component and that the object is defined with the appropriate properties.

Leave a comment