Passing a computed prop to child in Vue
1 min read

Passing a computed prop to child in Vue

I was having issues passing a computed prop from a parent to a child component in Vue. When I tried to access the prop in mounted, it would be null.
But in Vue DevTools, the prop would be a nonnull value.
The mistake was the parent component would pass the variable null when the child renders. To fix this, I added a v-if so the child will render after receiving the value.

<ChildComponent v-if="testData" :data="testData" />

If it's possible for the prop to be null, you can use nextTick() instead.

  mounted () {
      let vm = this;

      Vue.nextTick(function () {
        console.log(vm.testData);
      });
  },