Опоры не определены в дочернем компоненте при его создании - PullRequest
Новая
       1

Опоры не определены в дочернем компоненте при его создании

0 голосов
/ 31 марта 2019

Я получил сообщение «artists prop is Undefined» в консоли

console output showing

Структура компонентов:

Discover> ArtistSlider> ArtistItem

Discover передает реквизит artists в ArtistSlider и делает это только тогда, когда все данные получены из API.Но ArtistSlider выдает ошибку, что проп artists по какой-то причине не определен.В то же время, ArtistItem не выдает ошибку, несмотря на то, что он является потомком ArtistSlider, и он получает реквизит artist от ArtistSlider.

Я читал о жизненном цикле vue, но все еще не могупонять, почему это происходит.Особенно в середине дерева компонентов.

Откройте для себя: 

<template>
  <div>
    <h1>Discover page</h1>
    <artist-slider :artists="collection.new_artists"/>
  </div>
</template> 

<script>
import store from "@/store";
import Page from "@/mixins/Page";
import ArtistSlider from "@/components/ArtistSlider";

export default {
  extends: Page,
  async beforeRouteEnter(to, from, next) {
    const collection = await store.dispatch("fetchUrl", {
      url: "discover",
      params: { location: "uae" }
    });
    console.log('Received collection from API', collection)
    next(vm => (vm.collection = collection));
  },
  components: {
    ArtistSlider,
  },
  created() {
    console.log('Discover Created', this.collection)
  }
};
</script>

ArtistSlider: 

<template>
  <section>
    <h2>New Artists</h2>
    <ul>
      <artist-item
        v-for="artist in artists"
        :key="artist.slug"
        :artist="artist"
      />
    </ul>
  </section>
</template>

<script>
import ArtistItem from './ArtistItem'

export default {
  name: "AppArtistSlider",
  props: {
    artists: {
      required: true,
      type: Array
    }
  },
  components: {
    ArtistItem
  },
  created() {
    console.log('Slider Created', this.artists)
  }
};
</script>

<style lang="scss" scoped>
</style>

ArtistItem: 

<template>
  <li>
    <app-image :src="artist.avatar.small" :alt="artist.full_name" /> 
    <h3>{{artist.full_name}}</h3>
    <p>{{artist.art_type.name}}</p>
  </li>
</template>

<script>
  import AppImage from './AppImage.vue'

  export default {
    name: 'ArtistItem',
    props: {
      artist: {
        required: true,
        type: Object
      },
    },
    components: {
      AppImage
    },
    created() {
      console.log('Item Created', this.artist)
    }
  }
</script>

БудетЦени любую помощь.Спасибо!

...