CODEWITHSUNDEEP
javascriptvue.jsvue-component
Axel
Axel

Reputation: 5111

How to check if prop is present in Vue?

I have a component like this:

<vue-component show></vue-component>

As you can see that there is a show prop. I couldn't use typeof because it's always undefined as there's no value. Please help!

Upvotes: 4

Views: 10821

Answers (2)

Soth
Soth

Reputation: 3045

As an addendum to Bhojendra Rauniyar's answer you should probably set the default to false:

Vue.component('my-component', {
  //props:['show'] <--- Wont work
  props: {
      'show': { 
          type: Boolean, 
          default: false
       } 
  },  
  template: `<div>show is: {{show}}</div>`
})

new Vue({
  el: '#app',
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component show></my-component>
</div>

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Well, you will use like the following in the template:

<div v-if="show">
...
</div>

If you need to check inside the script, you may know like:

if(this.show) {

And,

typeof show // will always be undefined

Because props can also be accessed using this:

typeof this.show // will return Boolean as you're just passing show
// which is simply like `:show="true"`

Upvotes: 5

Related Questions