question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

4reactions
khrome83commented, May 11, 2019

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.

3reactions
schmulschubiakcommented, Apr 7, 2019

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 😕

Read more comments on GitHub >

github_iconTop Results From Across the Web

Passing boolean Vue prop value in HTML - Stack Overflow
If you are not using v-bind , the haveBanner prop will always be truthy because it is a string of non-zero length, no...
Read more >
Boolean - JavaScript - MDN Web Docs
Any object, including a Boolean object whose value is false , evaluates to true when passed to a conditional statement.
Read more >
The 10 Most Common JavaScript Issues Developers Face
If you need help figuring out why your JavaScript isn't working, consult this list of the 10 most common JavaScript issues from a...
Read more >
Docs • Svelte
You cannot export default , since the default export is the component itself. Variables defined in module scripts are not reactive — reassigning...
Read more >
about Functions Advanced Parameters - PowerShell
Switch parameters are parameters that take no parameter value. Instead, they convey a Boolean true-or-false value through their presence or ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found