Pass multiple objects as props in Vue

In this short tutorial, we will see how to pass multiple objects as props from a parent component to a child component.

Let's take two components:

1. App.vue (Parent component), and
2. Student.vue (Child component)

Now we have to pass student objects from the parent component to the student component and display it to our template.

Let's see the code for each component.

<u>In Parent Component:</u>

<template>
  <div id="app">
    <Student
      v-for="student in studentObj"
      :studentProp="student"
      :key="student.id"
    />
  </div>
</template>

<script>
import Student from "./components/Student";

export default {
  name: "App",
  data() {
    return {
      studentObj: [
        { id: 1, name: "John" },
        { id: 2, name: "Adam" },
      ],
    };
  },
  components: {
    Student,
  },
};
</script>

Here, we have imported the Student component and used v-for directive to loop through the studentObj object in data.

<u>In student component (Child component)</u>

<template>
  <div class="student">
    Student id :{{ studentProp.id }} , name: {{ studentProp.name }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    studentProp: Object,
  },
};
</script>

In the student component, we have declared the props as StudentProp, so that Vue knows what external props are passed to the component.

When the props are passed from the parent component, we just display them in our vue template.

Output:

Student id :1 , name: John
Student id :2 , name: Adam

DEMO:

<a href="https://codesandbox.io/s/exciting-frog-c40f5y?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit c40f5y" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>