javascript - 访问 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>

是的，您需要列表组件中的 Prop

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

<script>
  export default {
    ...
    props:[posts]
    ...
  }
</script>