Boolean props without a value are not defaulted to true when there is a v-bind applied if they begin with `on`
Vue version
3.2.47
Link to minimal reproduction
https://codesandbox.io/s/infallible-hofstadter-eetgd6?file=/src/components/HelloWorld.vue
Steps to reproduce
<template>
<div>
<div>{{ something }}</div>
<div>{{ onSomething }}</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
onSomething: Boolean,
something: Boolean,
},
};
</script>
<template>
<HelloWorld v-bind="{}" something on-something />
</template>
What is expected?
onSomething
prop should default to true
What is actually happening?
The prop is ignored.
System Info
No response
Any additional comments?
No response
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
I appreciate that but this is not obvious from the docs and it is something that is difficult to change in large applications when moving from Vue 2 to Vue 3.
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
Maybe some warning print on console would be better? Developer could be hinted by the warning and realize where the problem are when they stuck into this situation.
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
I appreciate that but this is not obvious from the docs and it is something that is difficult to change in large applications when moving from Vue 2 to Vue 3.
You're right in that docs would profit from an update in that regard. The general behavior is considered public API though and won't be changed in 3.x.
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
Maybe some warning print on console would be better? Developer could be hinted by the warning and realize where the problem are when they stuck into this situation.
Hard to do right considering it's technically fine to pass an event listener as a prop prefixed with on[A-Z]
, and we will already have lots of projects actually doing that in places like object v-bind
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
I appreciate that but this is not obvious from the docs and it is something that is difficult to change in large applications when moving from Vue 2 to Vue 3.
You're right in that docs would profit from an update in that regard. The general behavior is considered public API though and won't be changed in 3.x.
The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.
Maybe some warning print on console would be better? Developer could be hinted by the warning and realize where the problem are when they stuck into this situation.
Hard to do right considering it's technically fine to pass an event listener as a prop prefixed with
on[A-Z]
, and we will already have lots of projects actually doing that in places like objectv-bind
Are you saying that this won't be fixed?