[Vue.js] ajax 요청 후 child component에 props 값을 전달하는 방법

ajax 요청 후 child component에 props 값을 전달하는 방법

ajax 통신을 한 뒤 child component에 props로 데이터를 넘겨줘야할 때가있습니다.
일반적으로 다음과 같이 코드를 작성하면 media 데이터가 child-component에 넘어갈 것이라고 예상합니다.

<template>
  <child-component :media="media"/>
</template>

<script>
export default {
  created () {
    this.$http.get('/something')
    .then(res => {
      this.media = res.data
    })
  },
  data () {
    return {
      media: {}
    }
  }
}
</script>

하지만, child component에서 this.media로 접근하면 null이 출력됩니다.

<script>
export default {
  created () {
    console.log(this.media)
    // null
  },
  props: [
    'media'
  ]
}
</script>

위 같은 결과가 나오는 이유는 ajax가 비동기 통신이기 때문입니다.
즉, 데이터 media에 값이 할당되기 전에 parent-component가 child-component로 media를 넘겨주고 있습니다.

우리는 다음과 같은 방법으로 해결할 수 있습니다.
media가 null이 아닐 경우에만 child-component를 렌더링하여 media 값을 child-component에게 넘깁니다.

<child-component v-if="media !== null" :media="media"/>

코드를 수정한 뒤 콘솔에 출력해보면 정상적으로 media 데이터가 넘어온 것을 확인하실 수 있습니다.

<script>
export default {
  created () {
    console.log(this.media)
    // {data: ..}
  },
  props: [
    'media'
  ]
}
</script>

[참고]
https://stackoverflow.com/questions/47530613/vuejs-assigning-prop-value-in-child-after-ajax-request-in-parent?rq=1