Sometimes, we want to access props in mounted function with Vue.js.

In this article, we’ll look at how to access props in mounted function with Vue.js.

How to access props in mounted function with Vue.js?

To access props in mounted function with Vue.js, we add v-if to our component to show the component only when the prop is set.

For instance, we write

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

to render ChildComponent only if the testData reactive property is set.

We set the data prop to testData this means the data prop would be set to testData in the mounted hook since we render the component only when testData is set.

Conclusion

To access props in mounted function with Vue.js, we add v-if to our component to show the component only when the prop is set.