CODEWITHSUNDEEP
javascriptvuejs2vue-component
kshep92
kshep92

Reputation: 895

Short hand to pass boolean props to Vue component

In the Vue docs for components it says:

Including the prop with no value will imply true: <blog-post favorited></blog-post>

However, when I try it on my component, it doesn't work (related fiddle):

<!-- html -->
<div id="app">
  <test-component visible></test-component>
</div>

<template id="template">
  <span>open: {{ open }}; visible: {{ visible }}</span>
</template>

<!-- JS -->
const TestComponent = Vue.extend({
  template: '#template',
  props: ['visible'],
  data: function() {
    return { 'open': true }
  }
});

new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  }
});

Is this a bug or am I doing something wrong?

Upvotes: 4

Views: 4576

Answers (1)

m3characters
m3characters

Reputation: 2290

I would also expect it to work as it is, but it seems you need to specify the type of field in the props declaration:

props: {
    'visible': {
        type: Boolean
    }
}

This makes it work correctly

Upvotes: 5

Related Questions