我没有足够的知识来解释为什么我的DOM不能显示来自storyblok的API调用结果

Question

我正在使用storyblok作为我的CMS在Nuxt中制作一个应用程序。然而，当我试图将storyblok数组链接到我的模板中使用v-for调用的数组时，我收到了错误。我从另一个用户那里得到了一些帮助，并修复了错误，但现在我不知道为什么DOM不能在模板中调用的v-for上显示API调用的结果(“book”和“post”)

以下是模板：

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

</div>
</template>

下面是我的脚本：

    <script>
    import InstanceHeader from '~/components/InstanceHeader';
    import BooksInfoPostTop from '~/components/BooksInfoPostTop';
    import BookTitles from '~/components/BookTitles';
    import BooksInfoPost from '~/components/BooksInfoPost';
    import axios from 'axios';

export default  {

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

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

    },

    async asyncData(context) {
    const result = {};
    const mapBooks = b => {
      return {
        id: b.slug,
        bookCover: b.content.bookCover,
        title: b.content.title,
        author: b.content.author
      };
    };

    result.posts = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/book-titles'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    result.books = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/top-books'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    return result; // it has right property names {books:[], posts:[]}
  }   
}

</script>

我不是最有经验的开发人员，如果有人能帮助我，我将不胜感激。谢谢

Answer 1

您不需要在等待promise时使用then。

const { data } = await context.app.$storyapi
  .get("cdn/stories", {
    version: "draft",
    starts_with: 'books/book-titles'
  }).then(response => {
    console.log(response);
    response.data.stories.map(mapBooks);
  });

result.posts = data.stories.map(mapBooks);

顺便说一句，你忘了在你的承诺中返回值：

result.posts = await context.app.$storyapi
  .get("cdn/stories", {
    version: "draft",
    starts_with: 'books/book-titles'
  }).then(response => {
    console.log(response);
    return response.data.stories.map(mapBooks); // return the array of books
  })

此外，您还应该检查response.data.stories是否未定义，否则可能会出现错误。