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

Question

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

现在我仍然会得到一个错误，当我验证html时，因为我只在vuex store中的变量为 true 时才显示此infobox。我使用v-if进行渲染。

这意味着如果没有单击按钮，则该元素不在DOM中，因此相应的id不存在并且我会收到一个错误。

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

但这仍然只会渲染一个infobox，而不是两个。

是否唯一的方法就是在模板中制作两个infobox，并将v-show添加到两者都上？或者有更好的方法使用aria-controls。

感谢任何帮助

最好的祝福

m

---

编辑:

以下是我的具有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 store)时才会显示，根据按下的按钮不同替换相应的内容。 （为了使代码更易于理解并专注于我的问题，我省略了一些内容。）

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

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

- Merc

---

展示代码。仅通过文本描述理解它几乎是不可能的。 - acdcjunior

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>

- connexo

---

好的，这看起来没问题。但是这不会影响 ARIA 部分吗？我的意思是，如果它没有打开，我就没有任何信息，表明该按钮控制任何 ARIA 元素。 也许我对 aria-controls 及其使用方式还不够了解，但是...你知道吗？ - Merc

这是一个有效的问题，但我不是能够回答它的人。 - connexo

aria-controls 是一个关系属性，应该与元素的 id 属性相同，因为它是该元素所“控制”的。aria-expanded 属性应该是动态的，并根据切换元素是否“展开”设置为 true 或 false。 - superUntitled