Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *