Subscribe on changes!

Boolean props without a value are not defaulted to true when there is a v-bind applied if they begin with `on`

avatar
Mar 9th 2023

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

avatar
Mar 10th 2023

The prefix 'on' is considered an event. It is not recommended to use the 'on' prefix as a boolean attribute.

avatar
Mar 10th 2023

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.

avatar
Apr 28th 2023

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.

avatar
Apr 28th 2023

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

avatar
May 4th 2023

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

Are you saying that this won't be fixed?

avatar
Sep 19th 2023

We also ran into this issue when upgrading from vue2 and it was really hard to figure it out. Is it documented anywhere that prop names beginning with "on" are problematic? A warning in the console would have been great.