하위 구성 요소에 전달된 프로포트가 생성된 메서드에 정의되지 않았습니다.

하위 구성 요소에 전달된 프로포트가 생성된 메서드에 정의되지 않았습니다.

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>

구글 검색을 많이 해봤지만 찾은 해결 방법 중 문제를 해결하지 못했습니다.

이것은 순전히 타이밍 문제입니다.무슨 일이 일어나는지 알려줄게...

1. 부모 컴포넌트가 생성됩니다.현시점에서는 빈 어레이가 할당되어 있습니다.place(이것도 문제지만 나중에 얘기할게요)비동기 요청이 시작되었습니다.

2. 부모 컴포넌트는CardComponent템플릿을 통한 인스턴스

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

   이 단계에서place는 아직 빈 배열입니다.place.card정의되어 있지 않다

3. 그CardComponent created훅 실행, 로깅undefined
4. 그CardComponent탑재되어 있습니다.mounted훅 실행(와 같은 로깅 결과)created)
5. 상위 구성 요소가 마운트되었습니다.
6. 그 후 어느 시점에서 비동기 요구가 해결되어 변경됩니다.place빈 배열에서 객체로, 아마도 를 사용하여card소유물.
7. 새로운card재산은 고객님께 상속됩니다.CardComponent그리고 그것은 반응적으로 표시되는{{ card }}값을 지정합니다.

만약 당신이 잡기를 원한다면card데이터 변경을 제안할 수 있습니다.beforeUpdate후크

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

데모

Vue.component('CardComponent', {
  template: '<pre>card = {{ card }}</pre>',
  props: ['card'],
  created () {
    console.log('created:', this.card)
  },
  mounted () {
    console.log('mounted:', this.card)
  },
  beforeUpdate () {
    console.log('beforeUpdate:', this.card)
  }
})
new Vue({
  el: '#app',
  data: {
    place: {}
  },
  created () {
    setTimeout(() => {
      this.place = { card: 'Ace of Spades' }
    }, 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>

그리고나서CardComponent다음 시간 이후에만 생성 및 마운트됩니다. place데이터가 있습니다.

다음 사항을 확인합니다.props: true라우터의 파일에 격납되어 있습니다.그것은 간단한 해결책이지만 우리들 중 많은 이들이 이것을 잊는다.

{
  path: '/path-to',
  name: 'Name To',
  component: Component,
  props: true
}

언급URL : https://stackoverflow.com/questions/54974846/prop-passed-to-child-component-is-undefined-in-created-method