Опора, переданная дочернему компоненту, не определена в созданном методе

Question

Я использую Vue.js 2.

У меня проблема с передачей значения дочернему компоненту в качестве реквизита.Я пытаюсь передать card на card-component.

В card-component я могу получить доступ к подпорке в секции Card goes here {{card}}.

Однако, когда я пытаюсь получить доступ к ней в created или mounted методах, это undefined.

Родитель:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <card-component :card="place.card"></card-component>

            </div>
        </div>
    </div>
</template>

<script>
    import CostComponent from './CostComponent';
    import CardComponent from './CardComponent';

    export default {
        components: {
            CostComponent, CardComponent
        },

        props: ['id'],

        data() {
            return {
                place: []
            }
        },

        created() {
            axios.get('/api/places/' + this.id)
            .then(response => this.place = response.data);
        }
    }
</script>

Ребенок:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <ul class="list-unstyled">

                    Card goes here {{card}}

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import CardItemComponent from './CardItemComponent';

    export default {
        components: {
            CardItemComponent
        },

        props: ['card'],

        created() {
            console.log(this.card); // undefined
        },

        mounted() {
            console.log(this.card); // undefined
        },
    }
</script>

Я много гуглил, но ни одно из найденных решений не устранило мою проблему.

Answer 1

Это чисто временная проблема.Вот что происходит ...

1. Ваш родительский компонент создан.В настоящее время ему назначен пустой массив place (это тоже проблема, но я вернусь к этому позже).На этом этапе запускается асинхронный запрос

2. Ваш родительский компонент создает экземпляр CardComponent через свой шаблон

   <card-component :card="place.card"></card-component>
   

   , place по-прежнему пустой массив, поэтому place.card не определено

3. Хук CardComponent created работает, ведение журнала undefined
4. CardComponent установлен и его mounted хук работает (тот же результат регистрации)as created)
5. Ваш родительский компонент смонтирован
6. В какой-то момент после этого асинхронный запрос разрешается и заменяет place с пустого массива на объект, предположительно с card property.
7. Новое свойство card передается в ваше CardComponent, и оно реактивно обновляет отображаемое значение {{ card }} в своем шаблоне.

Если вы хотителовить при изменении данных card реквизит можно использовать beforeUpdate hook

beforeUpdate () {
  console.log(this.card)
}

Demo

Vue.component('CardComponent', {
  template: 'card = {{ card }}

', props: [' card '], созданный () {console.log (' созданный: ', this.card)}, смонтированный () {console.log (' mount: ', this.card)}, beforeUpdate () {console.log ('beforeUpdate:', this.card)}}) new Vue ({el: '#app', data: {place: {}}, созданный () {setTimeout (() => {this.place = {карточка: 'Пиковый туз'}}, 2000)}})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <card-component :card="place.card" />
</div>

См. https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

---

Если place подразумевается как объект, вы не должны инициализировать его как массив.Кроме того, если ваш CardComponent зависит от наличия данных, вы можете условно отобразить его.

Например,

data () {
  return { place: null }
}

и

<card-component v-if="place" :card="place.card"></card-component>

then CardComponent будет создан и смонтирован только после того, как place будет иметь данные.