Vue js 자식 구성 요소에서 정의되지 않은 소품.하지만 그 대본에서만

Vue js 자식 구성 요소에서 정의되지 않은 소품.하지만 그 대본에서만

나는 이제 막 Vue를 사용하기 시작했고 예상치 못한 행동을 경험했다.부모 구성 요소에서 자식 구성 요소로 소품을 전달하는 것에 대해 나는 아이의 템플릿에 있는 소품에는 접근할 수 있었지만, 아이의 대본에는 접근할 수 없었다.그러나 부모 템플릿(마스터 div)의 v-if 지시어를 사용했을 때 자식 스크립트와 자식 템플릿의 소품 모두에 액세스할 수 있었다.여기에 설명을 해주시면 감사하겠는데, 이 코드를 더 잘 만들 수 있는 방법이 없을까?아래 코드를 참조하십시오.고마워요.

상위 구성 요소:

<template>
<div v-if="message">
<p>
{{ message.body }}
</p> 
<answers :message="message" ></answers>
</div>
</template>

<script>
  import Answers from './Answers';
  export default {
    components: {
      answers: Answers
    },
    data(){
      return {
        message:""
      }
    },
    created() {
      axios.get('/message/'+this.$route.params.id)
        .then(response => this.message = response.data.message);
    }
  }
</script>

하위 구성 요소

<template>
  <div class="">
  <h1>{{ message.id }}</h1> // works in both cases
  <ul>
    <li v-for="answer in answers" :key="answer.id">
      <span>{{ answer.body }}</span>      
    </li>
  </ul> 
  </div>
</template>

<script>
  export default{
    props:['message'],    
    data(){
      return {
        answers:[]
      }
    },    
    created(){
      axios.get('/answers/'+this.message.id) //only worls with v-if in parent template wrapper
        .then(response => this.answers = response.data.answers);
    }
  }
</script>

this.message.id와만 통하다v-if왜냐하면 때때로 message사물이 아니다.

메시지 개체를 검색하는 상위 구성 요소에서 수행 중인 호출은 비동기식입니다.즉, 자식 구성 요소가 로드되기 전에 통화가 완료되지 않는 경우.그럼 자식 구성 요소가 로드되면message="". 그것은 가지고 있는 물체가 아니다.id재산언제message=""그리고 당신은 실행하려고 노력한다.this.message.id당신은 실수를 한다 왜냐하면 그것이 없기 때문이다.id끈의 속성

계속 사용할 수 있음v-if, 가장 좋은 방법일 수 있으며, 또는 자식 구성 요소의 ajax 호출이 다음과 같은 경우에 실행되지 않도록 방지하는 방법message로 이동하는 동안 대상이 아니다.updated.

참조URL: https://stackoverflow.com/questions/44830651/undefined-props-in-vue-js-child-component-but-only-in-its-script