时间戳

首页 > 解决方案 > 在 Nuxt 组件中访问 axios 返回的数组以循环

javascript - 在 Nuxt 组件中访问 axios 返回的数组以循环

问题描述

我正在尝试使用 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>

标签： javascriptvue.jsaxiosnuxt.js

解决方案

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

是的，您需要列表组件中的道具

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

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

推荐阅读