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

Question

<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?

Answer 1

Looks like from the W3C spec, the value of aria-expanded can be true or false. So in your template you can do this.

<button class="navbar__dropdown-toggle" :aria-expanded="active ? 'true' : 'false'">expanded</button>

Working example.

Answer 2

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.