Vue.js:在Vue.js中将aria-controls与条件渲染一起使用

问题描述

我有两个按钮，可以在屏幕上切换一些其他信息.我在 aria-controls 属性中添加了按钮，并为信息框渲染了 id .

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.

现在，当我验证html时，仍然会出现错误，因为仅当vuex存储中的变量为 true 时，才显示此信息框.我用 v-if 渲染它.

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.

因此，这意味着如果未单击按钮，则该元素不在DOM中，因此缺少相应的 id ，并且出现错误.

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.

我试图使用 v-show ，因为这只会将其隐藏.

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

但是，这仍然只会呈现一个信息框，而不是2.

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

获得此权利的唯一方法是在模板中制作两个信息框，并向两者都添加 v-show 吗?还是有一种更好的方式来使用 aria-controls .

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.

感谢您的帮助

最佳

m

这些是我的具有aria-controls的按钮.

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>

这是我的信息框组件:

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

仅当infoboxOpen === true(从vuex存储)中显示哪个内容，并且根据按下哪个按钮来替换内容.(我省略了其中一些内容，以使代码更易于理解，并在此处关注我的问题).

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

在这里我可以将 v-if 替换为 v-show ，但这仍将仅呈现一个内容.而且我想让它尽可能动态，因为用户可以在后端添加更多信息框...

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.

推荐答案

您快到了，只需使用
将 aria-controls 设置为动态属性即可:aria-controls ="infoboxOpen?item.name:"":

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>

这篇关于Vue.js:在Vue.js中将aria-controls与条件渲染一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！