Elementy konstrukcyjne Vue bez wartości

Question

Chcę ustawić atrybut na moim komponencie bez żadnej wartości. Na przykład:

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

Jestem deklarując primary w props mojego komponentu:

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

Niestety, to nie działa. Właściwość primary to undefined, a klasa nie jest stosowana.

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

Answer 1

Najważniejsze jest, aby zadeklarować typ podpory jako Boolean:

props: { 
    primary: Boolean 
} 

Następnie określając jedynie atrybut nazwa sprawia, że ​​jego wartość ustawioną na true.

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