Vue component components without value

Question

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

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

I declare primaryin propsmy component:

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

Unfortunately, it does not work. The property primaryis undefined, and the class does not apply.

+6

Lukasz Wiktor Jun 17 '17 at 9:14

1 answer

Lukasz Wiktor · Accepted Answer · 2017-06-17T09:14:15+0000

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

props: {
    primary: Boolean
}

Then, specifying only the attribute name makes its value equal true.