我有两个按钮,可以切换屏幕上的一些其他信息。我为这些按钮添加了
现在我仍然会得到一个错误,当我验证html时,因为我只在vuex store中的变量为
这意味着如果没有单击按钮,则该元素不在DOM中,因此相应的
我尝试使用
但这仍然只会渲染一个infobox,而不是两个。
是否唯一的方法就是在模板中制作两个infobox,并将
感谢任何帮助
最好的祝福
m
编辑:
以下是我的具有aria-controls的按钮。
只有当infoboxOpen === true (来自vuex store)时才会显示,根据按下的按钮不同替换相应的内容。 (为了使代码更易于理解并专注于我的问题,我省略了一些内容。)
这就是我可以用v-show替换v-if的地方,但这仍然只呈现一个内容。我希望它尽可能动态,因为用户可以在后端添加更多的infoboxes...
希望这有助于理解我的问题。
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...
希望这有助于理解我的问题。