Boolean variable is not set as true, when passed without `v-bind`

[cLupus]

Hi, I am unable to have a boolean property set to true, by specifying it in the parent component.

An example of the parent

<div>
    <child-component
        be-awesome
    />
</div>

import { Component, Vue } from 'vue-property-decorator'
import ChildComponent from './child'

@Component({ components: { ChildComponent } })
export default class ParentComponent extends Vue {
/* Here be some methods, getters, and such */
}

An example of the child

<div>
    <span v-if="beAwesome"> Cool </span>
<div/>

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class ChildComponent extends Vue {
    @Prop({ default: false, type: Boolean })
    readonly beAwesome: boolean
}

However, the parent component does not render as expected.

[schmulschubiak]

for me it works, if I do the following:

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class ChildComponent extends Vue {
    @Prop({ type: Boolean })
    private beAwesome: Boolean
}

Edit: oh, tslint hates private beAwesome: Boolean :/

[cLupus]

In ny case, I am using reflect-metadata for dropping the extraneous JavaScrip type deceleration.

Also, in my case, tslint is not an issue, as I’m using an ESLint plugin for linting .ts files.

[khrome83]

I can validate that this is not working as expected.

  @Prop() title!: string;
  @Prop(Boolean) secondary!: boolean;

I need to speciefy Boolean in the @Prop(Boolean), or use @Prop({ type: Boolean}).

But when I use a string or some other property this does not seem to be a issue. It would be ideal not need to specify the type.

[teledemic]

Thanks, this was driving me crazy. Adding { type: boolean } works as a fix but doesn't seem like it should be necessary.

[CostaIsNotAvailable]

Install reflect-metadata should do the trick.

This information is on documentation : https://github.com/kaorun343/vue-property-decorator#if-youd-like-to-set-type-property-of-each-prop-value-from-its-type-definition-you-can-use-reflect-metadata

[WeijianXu]

Thanks, this was driving me crazy. Adding { type: boolean } works as a fix but doesn't seem like it should be necessary.

I, too, don't want to set this { type: boolean } every time.