javascript - 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 控件的按钮。

<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-if 替换为 v-show，但仍然只会呈现一个内容。我希望它尽可能动态，因为用户可以在后端添加更多信息框......

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

Answer 1

差不多就完成了，只需使用
将 aria-controls 设为动态属性即可: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>