Vue.js：在 vue.js 中使用带有条件渲染的 aria-controls

Question

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

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

这意味着如果未单击该按钮，则该元素不在 DOM 中，因此缺少相应的 id，我会收到错误消息。

我尝试使用v-show，因为这只会隐藏它。

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

获得此权利的唯一方法是在模板中创建两个信息框并将v-show 添加到两者中吗？或者有没有更好的方法来使用aria-controls。

感谢您的帮助

最好的

米

---

编辑：

这些是我的带有 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 商店）并且内容根据按下的按钮而被替换时才会显示。 （我省略了其中的一些内容，以使代码更易于理解并在这里专注于我的问题）。

这是我可以用v-show 替换v-if 的地方，但这仍然只会呈现一个内容。而且我希望它尽可能动态，因为用户可以在后端添加更多信息框...

希望这有助于理解我的问题。

Answer 1

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

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