vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 429 forks source link

[8.0.0-rc.1] Boolean props don't behave like vanilla VueJS ones #500

Closed MergeCommits closed 3 years ago

MergeCommits commented 3 years ago

In vanilla VueJS, if you have a component with a boolean property, then its inclusion with no value will set it to true and its exclusion will set it to false.

This isn't respected with the class-style components.

// HelloWorld.vue
<template>
<p>Value is: {{ booleanProperty }},
    Type is: {{ typeof booleanProperty }}</p>
</template>

<script lang="ts">
import { Options, prop, Vue } from "vue-class-component";

class Props {
    public booleanProperty = prop<boolean>({});
}

export default class HelloWorld extends Vue.with(Props) {
}
</script>

// App.vue
<template>
<HelloWorld boolean-property />
<HelloWorld />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue";

@Options({
    components: {
        HelloWorld
    }
})
export default class App extends Vue {
}
</script>

Expected behavior

Output is:

Value is: true, Type is: boolean

Value is: false, Type is: boolean

Actual behavior

Output is:

Value is: , Type is: string

Value is: , Type is: undefined

Reproduction repo

https://github.com/QuaternionMark/vue-class-component-issue

ktsn commented 3 years ago

Because you don't pass Boolean constructor for the prop option. If you don't pass the constructor with defineComponent, it behaves the same.