javascript - 错误：“ [Vue警告]：属性或方法” posts”未在实例上定义，但在渲染期间被引用。”以及“ books”(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.

(在此处输入图像描述我正在使用Storyblok作为CMS在Nuxt和Vue中制作一个应用程序。)

However, I have been receiving errors when trying to link the storyblok array to my arrays called in my template using v-for.

(但是，在尝试使用v-for将Storyblok数组链接到模板中调用的数组时，出现了错误。)

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.

(当我尝试从Storyblok调用两个API时，我更多地注意到了此错误。)

When I called one API call I did not see this error.

(当我调用一个API调用时，没有看到此错误。)

I have also tried using Axios but I am getting errors using that method as well.

(我也尝试过使用Axios，但使用该方法也遇到错误。)

I am not the most experienced developer and If anyone can help I'll appreciate it.

(我不是最有经验的开发人员，如果有人可以提供帮助，我将不胜感激。)

Thanks

(谢谢)

  ask by clean translate from so

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.

(这样可以正常工作，如果不正常，请检查“网络”选项卡上是否有错误。)