Passing Object Array to Component VueJs

Question

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

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

Change posts: { type: Object } to posts: { type: Array } — Brian Lee
– Brian Lee, Commented Nov 15, 2020 at 8:01
@DigitalDrifter I tried your suggestion and I have mounted a console.log to check if posts are being passed but it's returning null null PostRender.vue:144 — Potato
– Potato, Commented Nov 15, 2020 at 8:06
Well you define posts: null in your home components data, it should be initialized as posts: []. And change :key="post.postid" to :key="post.post_id". — Brian Lee
– Brian Lee, Commented Nov 15, 2020 at 8:10
@DigitalDrifter I have ady updated the code it's returning an empty array Please refer to this picture : prnt.sc/vjeesl — Potato
– Potato, Commented Nov 15, 2020 at 8:20
Have you verified your request to api.domain.com/posts is actually returning data? What do you see if you console.log(this.posts) immediately after this.posts = response.data.posts; ? — Brian Lee
– Brian Lee, Commented Nov 15, 2020 at 8:22

Nikolay Yankov · Accepted Answer · 2020-11-15 08:13:02Z

1

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>

answered Nov 15, 2020 at 8:13

Nikolay Yankov

3861 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Potato Over a year ago

I have ady updated the code it's returning an empty array Please refer to this picture : prnt.sc/vjeesl

Nikolay Yankov Over a year ago

For debugging purposes you can add a Watch with console.log in PostRender.vue to see if any data will come in the component. You can also do it with the Vue dev tool chrome extension. Do you see the data coming in the component? watch: { posts: function(payload) { console.log("payload", payload); } }

Collectives™ on Stack Overflow

Passing Object Array to Component VueJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related