Ошибки: "[Предупреждение Vue]: свойство или метод" posts "не определены в экземпляре, но на них ссылаются во время рендеринга". а также для "книг"

Question

введите описание изображения здесь Я создаю приложение в Nuxt и использую storyblok в качестве моей CMS. Однако я получал ошибки при попытке связать массив storyblok с моими массивами, вызываемыми в моем шаблоне с помощью v-for.

Вот шаблон:

<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>

Вот мой сценарий:

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
                    };
            }),
        }   
    })


  } 


} 
}

Я заметил эту ошибку больше, когда пытался вызвать два API из storyblok. Когда я вызвал один вызов API, я не увидел этой ошибки. Я также пробовал использовать Axios, но при использовании этого метода тоже получаю ошибки. Я не самый опытный разработчик, и если кто-то может помочь, я буду признателен. Спасибо

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:[]}
  }
}

Ну, как вы упомянули в комментарии, раньше это был небольшой беспорядок. Так что я прибрался. Идея в том, что вам нужны прямые имена свойств вместо вложенных объектов. Таким образом, он должен работать, если он не работает, проверьте вкладку сети на наличие ошибок.