Errors: "[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render." and also for "books"

Question

enter image description here I am making an app in Nuxt and vue using storyblok as my CMS. However, I have been receiving errors when trying to link the storyblok array to my arrays called in my template using v-for.

Here is the template:

<template>
<div>
<!-- instance header -->
<InstanceHeader title="Books" />

<div class="pageContainer">

<div class="booksInfoPost"> 

    <div class="booksInfoPost__subHeader"><h3>Top Books</h3></div>

    <div class="booksInfoPost__topBooks"> 

     <BooksInfoPostTop 
        v-for="book in books"
        :key ="book.id"
        :bookCover="book.bookCover"
        :title="book.title"
        :author="book.author"
        :content="book.content"
        :id="book.id"
        /> 

    </div> 

    <div class="booksInfoPost__subHeader"><h3>Book Titles</h3></div>

     <BooksInfoPost 
        v-for="book in posts"
        :key ="book.id"
        :bookCover="book.bookCover"
        :title="book.title"
        :author="book.author"
        :content="book.content"
        :id="book.id"
        />  

    </div>
</div>

Here is my script:

export default  {

components: {
    InstanceHeader,
    BooksInfoPostTop,
    BookTitles,
    BooksInfoPost
},

data() {
    /* return {
        books: [],
        posts: []
    } */

},

async asyncData(context) {

     return {

      bookTitles:  context.app.$storyapi
      .get("cdn/stories", { version: "draft", starts_with: 'books/book-titles'})
      .then(response => {
     console.log(response);
        return  {
            posts: response.data.stories.map(bp => {
                return {
                    id: bp.slug,
                    bookCover: bp.content.bookCover,
                    title: bp.content.title,
                    author: bp.content.author
                    };
            }),
        }   
    }),

    topBooks:  context.app.$storyapi
      .get("cdn/stories", { version: "draft", starts_with: 'books/top-books'})
      .then(response => {
     console.log(response);
        return  {
            books: response.data.stories.map(b => {
                return {
                    id: b.slug,
                    bookCover: b.content.bookCover,
                    title: b.content.title,
                    author: b.content.author
                    };
            }),
        }   
    })


  } 


} 
}

I noticed this error more when I tried calling two APIs from storyblok. When I called one API call I did not see this error. I have also tried using Axios but I am getting errors using that method as well. I am not the most experienced developer and If anyone can help I'll appreciate it. Thanks

Answer 1

 export default { components: { InstanceHeader, BooksInfoPostTop, BookTitles, BooksInfoPost }, async asyncData(context) { const result = {}; const mapBooks = b => { return { id: b.slug, bookCover: b.content.bookCover, title: b.content.title, author: b.content.author }; }; const { data } = await context.app.$storyapi .get("cdn/stories", { version: "draft", starts_with: 'books/book-titles' }); result.posts = data.stories.map(mapBooks); const result = await context.app.$storyapi .get("cdn/stories", { version: "draft", starts_with: 'books/top-books' }); result.books = result.data.stories.map(mapBooks); return result; // it has right property names {books:[], posts:[]} } }

Well as you mentioned in the comment it was a little mess before. So i tidied it up. The idea is that you need direct property names instead of nested objects. This way it should work, if it is not working check the network tab for the errors.