Доступ к возвращенному массиву ax ios в компоненте Nuxt для l oop через - PullRequest
Новая
       39

Доступ к возвращенному массиву ax ios в компоненте Nuxt для l oop через

0 голосов
/ 09 февраля 2020

Я экспериментирую с Nuxt для создания сайтов SPA и stati c, и, хотя я понимаю концепцию получения данных из API и их циклического просмотра в Vue на самой странице, я борюсь с тем, как сделать это с компонентом. В моем примере я пытаюсь получить сообщения из API и просто перечислить все сообщения с их типом и названием. Позже я хотел бы стать более изощренным, но сначала хочу понять концепцию basi c. Как я могу получить данные "записей" из индекса. vue.

Мой индекс. 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>

Вот мой компонент List: 

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

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

Ответы [ 2 ]

2 голосов
/ 09 февраля 2020 
<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>
0 голосов
/ 11 февраля 2020

Вот что в итоге и дало мне то, что я искал.

В свой компонент List я добавил соответствующие реквизиты и их тип. 

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

<script>
  export default {

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

}
</script>

В основной индекс. vue Я добавил v-for к компоненту и также привязал параметры: 

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