CODEWITHSUNDEEP
javascriptvue.js
Potato
Potato

Reputation: 105

Passing Object Array to Component VueJs

I'm trying to pass Object Array to my component but it's not passing the objects

Here is a sample data from the api

enter image description here

home.vue

<template>
   <PostRender :posts="posts"/>
</template>

<script>
import PostRender from "@/components/PostRender.vue";
export default {
    name: 'Home',
    components: {
        PostRender,
    },
    data() {
        return {
            posts: [],
        }
    },
    mounted() {
       this.getposts();
    },
    methods: {
       getPosts() {
                var token = this.$session.get('token');
                this.$http.get('api.domain.com/posts',
                {
                    headers: {
                        'Authorization':token
                    }
                })
                .then((response) => {
                    this.posts = response.data.posts;
                });
                
        }
    }
}

PostRender.Vue

<template>
   <div v-for="post in posts" :key="post.post_id">
      <div>{{post.title}}</div>
   </div>
</template>

<script>
export default {
    name: 'PostRender',
    props: {
       posts: { 
          type: Array,
          default() {
            return [];
          }
       }
    }
}

How can I pass the Object array from home.vue to postrender.vue? Because it's returning null

Upvotes: 0

Views: 66

Answers (1)

Nikolay Yankov
Nikolay Yankov

Reputation: 386

In PostRender.vue - posts property should be of type Array. I write it like this with default value:

<script>
export default {
  name: "Home",
  props: {
    posts: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

Upvotes: 1

Related Questions