aria tag gets removed entirely on "false"

When you use a screenreader to visit an accordion (dropdown) you need the aria-expanded to be “false” on init. Vue automatically removes the aria-expanded tag entirely when false. Is there a way to keep the aria-expanded tag with a “false” value.

<button type="button" class="bl-panel__header bl-panel__header--has-action" @click.prevent="isOpened1 = !isOpened1" :aria-expanded="isOpened1" aria-controls="dropdown-1">
        <span aria-hidden="true" class="bl-panel__header__toggle vi vi-u-badge vi-u-badge--small vi-arrow vi-u-90deg" :class="{'bl-panel__header__toggle--reverse': !isOpened1}"></span>
        <div class="bl-panel__header__content">
          <h1 class="bl-panel__header__content__title">
            Call to action (button)
          </h1>
          <h2 class="bl-panel__header__content__subtitle">
            Schoolabonnementen
          </h2>
        </div>
      </button>

:aria-expanded=“isOpened1” is removed on false.

[ktsn]

You can stringify your variable.

:aria-expanded="String(isOpened1)"

[warrebuysse]

@ktsn Genius! Thanks!