Question

enter image description here我正在使用Storyblok作为我的CMS在Nuxt和Vue中制作一个应用程序。但是，在尝试使用v-for将Storyblok数组链接到模板中调用的数组时，出现了错误。

这是模板：

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


  } 


} 
}

当我尝试从Storyblok调用两个API时，我更多地注意到了此错误。当我调用一个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:[]}
  }
}

就像您在评论中提到的那样，之前有点混乱。所以我整理了一下。这个想法是，您需要直接的属性名称而不是嵌套的对象。这样可以正常工作，如果不正常，请检查“网络”标签中的错误。

错误：“ [Vue警告]：属性或方法“ posts”未在实例上定义，但在渲染期间被引用。”以及“书籍”

1 个答案: