Vue component props without value

Question

I want to set an attribute on my component without any value. For example:

<my-button primary>Save</my-button> 

I'm declaring primary in props of my component:

Vue.component("my-button", {   props: ["primary"],   template: "<button v-bind:class='{primary: primary}'><slot></slot></button>" }) 

Unfortunately, it doesn't work. The primary property is undefined and the class is not applied.

JSFiddle: https://jsfiddle.net/LukaszWiktor/g3jkscna/

Answer 1

The key is to declare type of the prop as Boolean:

props: {     primary: Boolean } 

Then specifying only attribute name makes its value set to true.

Working JSFiddle: https://jsfiddle.net/LukaszWiktor/gfa7gkdb/