How do you force Vue to show falsey attributes using v-bind?

user_4564313 0
Viewed 4016
<button class="navbar__dropdown-toggle" :aria-expanded="active"></button>

I am trying to bind aria-expanded to the state of a dropdown menu. Unfortunately, when using a screen reader (for the visually impaired), dictation doesn't indicate that it is a non-expanded dropdown menu since falsey attributes are removed.

Is there any way of forcing a falsey attribute to remain?

vuejs2 vue-component
3 Answers

Assuming your boolean has a value, I prefer using toString():

<button class="navbar__dropdown-toggle" :aria-expanded="active.toString()"></button>

It is short and the intent is perhaps clearer than the other examples.

user_101082120
Related