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, when I validate the html, because I show this infobox only if a variable in the vuex store is true. I render it with v-if.

So that means if the button was not clicked the element is not in the DOM and therefore the corresponding id is missing and I get an error.

I tried to use v-show because this would only hide it.

But this would still only render one infobox instead of 2.

Is the only way to get this right to make two infoboxes in the template and add the v-show to both? Or is there a nicer way to use aria-controls.

Thanks for any help

Best

m

---

Edit:

These are my buttons which have aria-controls.

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

And this is my infobox component:

<template>
  <div class="Infobox" v-if="infoboxOpen" id="//should correspond to aria controls">
    <span v-html="infoContent">Some content</span>
  </div>
</template>

Which is only shown if infoboxOpen === true (from vuex store) and the content is replaced depending on which of the buttons is pressed. (I left out some of this stuff, to make the code easier to understand and to focus on my question here).

This is where I could replace the v-if with the v-show but that would still render only one content. And I would like to have it as dynamic as possible, because users can add more infoboxes in the backend...

Hope this helps understanding my issue.

回答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>

来源：https://stackoverflow.com/questions/49849056/vue-js-use-aria-controls-with-conditional-rendering-in-vue-js