Vue.js:在vue.js中使用带条件呈现的vue.js控件

Question

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

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

因此，这意味着如果没有单击按钮，元素不在DOM中，因此缺少相应的id，我将得到一个错误。

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

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

只有这样，才能在模板中创建两个信息框并将v-show添加到这两个信息框中吗？或者有更好的方式来使用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-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>