在Nuxt组件中访问axios返回的数组以循环通过

Question

我正在尝试使用Nuxt构建SPA和静态网站，虽然我了解从API抓取数据并在页面本身的Vue中遍历数据的概念，但我仍在努力使用组件来做到这一点。在我的示例中，我试图从API中获取帖子，并仅列出所有帖子及其类型和标题。我想稍后再变得更复杂，但想首先了解基本概念。如何从index.vue中获取“帖子”数据。

我的index.vue文件：

<template>
  <div>
    <navbar />
    <logo />
    <ul>
     <list /> // want the posts to be looped in this component
    </ul>
  </div>
</template>

<script>

import Navbar from '~/components/Navbar.vue'
import Logo from '~/components/Logo.vue'
import List from '~/components/List.vue'

export default {

  components: {
    Navbar,
    Logo,
    List
  },

  async asyncData ({ $axios }) {
    const posts = await $axios.$get('https://www.myapi.com/posts')
    return {
      posts
    }
  }

}

</script>

<style>

</style>

这是我的列表组件：

<template>
  <li v-for="post in posts">
   {{ post.type }} - {{ post.title }}
  </li>
</template>

<script>
  // do i need props here??
</script>

Answer 1

<template>
  <div>
    <navbar />
    <logo />
    <ul>
     <list :post="post" /> // : is v-bind alias
    </ul>
  </div>
</template>

<script>

import Navbar from '~/components/Navbar.vue'
import Logo from '~/components/Logo.vue'
import List from '~/components/List.vue'

export default {

  components: {
    Navbar,
    Logo,
    List
  },

  async asyncData ({ $axios }) {
    const posts = await $axios.$get('https://www.myapi.com/posts')
    return {
      posts
    }
  }

}

</script>

<style>

</style>

Answer 2

这是最终让我得到我所寻找的东西。