Vue.js: Use Aria-controls With Conditional Rendering In Vue.js

I have two buttons which toggle some additional information on screen. I added the buttons the aria-controls attribute und I render an id for the infobox. Now I still get an error,

Solution 1:

You're almost there, just make aria-controls a dynamic attribute using
:aria-controls="infoboxOpen ? item.name : ''":

<template>
  <div>
    <ul v-if="nav.items">
      <li
        v-for="(item, key) in nav.items"
        @keyup.esc="closeInfoBox">
          <button to="" :aria-controls="infoboxOpen ? item.name : ''" aria-expanded="false">Designathon</button>
      </li>
    </ul>
  </div>
</template>