Vue.js: vue.js에서 조건부 렌더링과 함께 아리아 컨트롤을 사용합니다.

Vue.js: vue.js에서 조건부 렌더링과 함께 아리아 컨트롤을 사용합니다.

화면의 추가 정보를 전환하기 위한 두 개의 버튼이 있습니다.버튼을 추가했습니다.aria-controlsattribute und 렌더링id를 참조해 주세요.

vuex 스토어의 변수가 다음과 같은 경우에만 이 정보 상자를 표시하기 때문에 html을 검증할 때 오류가 발생합니다.true...로 렌더링합니다.v-if.

즉, 버튼을 클릭하지 않은 경우 요소는 DOM에 존재하지 않으므로 해당 요소는id누락되어 에러가 발생합니다.

사용하려고 했습니다.v-show이렇게 하면 감춰질 뿐이니까

그러나 이렇게 해도 2개가 아닌 1개의 정보 상자만 렌더링됩니다.

이 권한을 얻으려면 템플릿에 2개의 인포박스를 만들고v-show둘 다에게요?아니면 더 좋은 방법이 있을까요?aria-controls.

도와주셔서 감사합니다.

최량

m

---

편집:

아리아 컨트롤이 있는 버튼입니다.

<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그래도 한 가지 내용만 남길 수 있어요사용자가 백엔드에 더 많은 정보 상자를 추가할 수 있기 때문에 가능한 한 동적으로 하고 싶습니다.

이것이 나의 문제를 이해하는 데 도움이 되기를 바랍니다.

거의 다 왔어, 그냥 만들어줘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>

언급URL : https://stackoverflow.com/questions/49849056/vue-js-use-aria-controls-with-conditional-rendering-in-vue-js