javascript - Vue.js: Use aria-controls with conditional rendering in vue.js - Stack Overflow

admin管理员组

文章数量:1313786

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 ponent:

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

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 ponent:

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

• javascript
• vue.js
• conditional-statements
• accessibility
• vuex

Share Improve this question Follow edited Apr 16, 2018 at 6:25 Merc asked Apr 16, 2018 at 2:59 MercMerc 4,57088 gold badges5858 silver badges8787 bronze badges 1

• 2 Show the code. It is near impossible to understand it via a textual description only. – acdcjunior Commented Apr 16, 2018 at 3:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>

本文标签： javascriptVuejs Use ariacontrols with conditional rendering in vuejsStack Overflow