Đạo cụ thành phần Vue không có giá trị

Question

Tôi muốn đặt thuộc tính trên thành phần của mình mà không có bất kỳ giá trị nào. Ví dụ:

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

Tôi tuyên bố primary trong props của thành phần của tôi:

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

Thật không may, nó không hoạt động. Tài sản primary là undefined và lớp học không được áp dụng.

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

Answer 1

Điều quan trọng là để khai báo kiểu của prop như Boolean:

props: { 
    primary: Boolean 
} 

Sau đó, xác định chỉ tên thuộc tính làm cho giá trị của nó thiết lập để true.

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