Javascript Vue.js：在Vue.js中使用带条件呈现的aria控件

我有两个按钮，可以在屏幕上切换一些附加信息。 我在

aria控件

属性中添加了按钮，并为信息框呈现了一个

id

现在，我在验证html时仍然会遇到一个错误，因为只有当vuex存储中的变量为

true

时，我才会显示此信息框。 我用

v-if

渲染它

这意味着如果没有单击按钮，元素就不在DOM中，因此相应的

id

丢失，我得到一个错误

我尝试使用

v-show

，因为这只会隐藏它

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

唯一正确的方法是在模板中创建两个信息框并将

v-show

添加到这两个信息框中吗？或者有没有更好的方法来使用

aria控件

谢谢你的帮助

最好的

m

---

编辑：

这些是我的按钮，有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 store）时才会显示，并根据按下的按钮替换内容。 （我省略了一些内容，以便代码更容易理解，并将重点放在我的问题上）

在这里，我可以将

v-if

替换为

v-show

，但仍然只能呈现一个内容。我希望它尽可能动态，因为用户可以在后端添加更多信息框

---

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

您就快到了，只需使用

：aria controls=“infoboxOpen？item.name:”

：

设计通

您就快到了，只需使用

：aria controls=“infoboxOpen？item.name:”

：

设计通

显示代码。仅仅通过文本描述几乎不可能理解它。显示代码。仅仅通过文字描述几乎不可能理解它。嗯，好吧。看起来没问题。但这不妨碍咏叹调部分吗？我的意思是，在没有打开的情况下，我没有任何信息，这个按钮可以控制任何aria元素。也许我对aria控件以及它们的使用时间了解不够，但是。。。是 啊你知道吗？这是一个有效的问题，但我不是能够回答这个问题的人。

aria controls

是一个关系属性，应该与id属性相同，与元素“controls”相同。

aria expanded

属性应该是动态的，并且根据toggle元素是否“expanded”设置为true或false。好的。看起来没问题。但这不妨碍咏叹调部分吗？我的意思是，在没有打开的情况下，我没有任何信息，这个按钮可以控制任何aria元素。也许我对aria控件以及它们的使用时间了解不够，但是。。。是 啊你知道吗？这是一个有效的问题，但我不是能够回答这个问题的人。

aria controls

是一个关系属性，应该与id属性相同，与元素“controls”相同。

aria expanded

属性应该是动态的，并根据toggle元素是否为“expanded”设置为true或false。

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