Accessing axios returned array in a Nuxt component in order to loop through

Question

I'm experimenting with Nuxt for building SPA's and static sites, and while I understand the concept of grabbing data from an API and looping through it in Vue on the page itself, I'm struggling with how to do this with a component. In my example I am trying to grab posts from an API, and simply list all the posts with their type and title. I'd like to get more sophisticated later, but want to understand the basic concept first. How can I get the "posts" data from the index.vue.

My index.vue file:

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

Here is my List component:

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

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

larrykkk · Accepted Answer · 2020-02-09 05:06:59Z

2

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

yes you need props in list component

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

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

answered Feb 9, 2020 at 5:06

larrykkk

5299 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DubVader Over a year ago

Thanks, this was not the total solution but helped me get there. Will post my solution shortly.

DubVader · Accepted Answer · 2020-02-10 23:34:31Z

Here is what ultimately got me what I was looking for.

In my List component, I added the appropriate props and their type.

<template>
  <li>
   {{ type }} - {{ title }}
  </li>
</template>

<script>
  export default {

  props: { title: String, type: String, posts: Array } // Added props and their type

}
</script>

In the main index.vue I added the v-for to the component and bound the parameters as well:

<template>
  <div>
    <navbar />
    <logo />
    <ul class="list-of-items">
      <list
        v-for="post in posts"
        :title="post.title"
        :type="post.type"
      />
    </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>

Collectives™ on Stack Overflow

Accessing axios returned array in a Nuxt component in order to loop through

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related