Menu
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/
709
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
Vue. js props are not to be mutated as this is considered an Anti-Pattern in Vue. Now your list structure that is passed to the component is referenced and mutated via the data property of your component :-) If you wish to do more than just parse your list property then make use of the Vue component' computed property.
Props and data are both reactiveWith Vue you don't need to think all that much about when the component will update itself and render new changes to the screen. This is because Vue is reactive.
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/
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With