[Vuejs]-Vuex and axios, remote content not showing on initial page load

by

2👍

✅

You have miss type mapState with posts, but there is no posts property. L18-19 of your Home.vue file
There is a miss interpretation of type, between pages as Array and content/title as String. L4-5 of your Home.vue file

Home.vue

<template>
   <div class="container header header--home">
      <div v-for="item in pages" :key="item.id">
         <h2 v-html="item.title"></h2>
         <p v-html="item.content"></p>
      </div>

   </div>
</template>

<script>
   import { mapState, mapActions } from 'vuex'
   export default {
      created() {
         this.getPosts()
      },
      computed: {
        ...mapState({
          pages: state => state.pages
        })
      },
      methods: {
         ...mapActions([
            "getPosts",
         ])
      }
   }
</script>
👤Tobino

0👍

Great stuff what Ru suggested above.

Tweaked the code a bit:

computed: mapState({
    pages: state => state.posts.pages,
}),

Somehow the posts need to be mentioned with the vuex-rest-api I am using.

Also, to get the right data from the wordpress rest-api I had to adjust the loop a little bit:

<div class="col-sm" v-for="item in pages" :key="item.id">
    <h2 v-html="item.title.rendered"></h2>
    <p v-html="item.content.rendered"></p>
</div>

Thanks!

👤Alex Marek

Leave a comment