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
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.
Expected behavior
Output is:
Actual behavior
Output is:
Reproduction repo
https://github.com/QuaternionMark/vue-class-component-issue