0

I use headless ui in vue 3 and i want to make when disclosure open it have border-primary class.

here is my current code :

<div class="w-full px-4 pt-16">
      <div class="w-full max-w-4xl p-2 mx-auto bg-white rounded-2xl space-y-2">
        <disclosure
          v-for="(item,i) in contents"
          v-slot="{ open }"
          :key="i"
          as="div"
          class="border-2 border-transparent transition duration-500 hover:border-primary rounded-xl group"
          :class="[open ? 'border-primary' : '']"
        >
          <disclosure-button
            class="flex justify-between w-full px-4 py-5 text-2xl font-[futura\_round\_medium] transition duration-500 group-hover:text-primary"
            :class="[open ? 'text-primary' : '']"
          >
            <span v-text="item.question" />
            <i-mdi-chevron-up
              :class="open ? 'transform rotate-180' : ''"
              class="text-2xl"
            />
          </disclosure-button>
          <disclosure-panel class="px-5 pb-3 text-xl font-[futura\_round\_regular]" v-html="item.answer" />
        </disclosure>
      </div>
    </div>

as you can see i already tried use :class="[open ? 'border-primary' : '']" in <disclosure></disclosure> but it don't work and gave me error like this Block-scoped variable 'open' used before its declaration. in my vscode

how do i use open value in <disclosure></disclosure>?

Hasan-Almujtaba
  • 15
  • 4
  • 1
    Why do you need to style `disclosure` itself? Isn't it disclosure panel or else that needs to be styled? You naturally won't be able to use `open` outside a slot, so you need to reconsider what you're trying to do – Estus Flask Dec 19 '21 at 13:27
  • @EstusFlask well, because i want to have same border both button and panel so i need to style disclosure. if i place border class in button or panel only, only that element will have border. – Hasan-Almujtaba Dec 19 '21 at 13:38
  • @EstusFlask also it's possible to style the disclosure according to documentation because you can render it as for example div. here's the proof : https://headlessui.dev/vue/disclosure#rendering-a-different-element-for-a-component – Hasan-Almujtaba Dec 19 '21 at 13:40
  • You may notice that without `as` there's no element in layout where a class could be applied. If you need container element, try to add it explicitly inside Disclosure like `
     – Estus Flask Dec 19 '21 at 14:05
  • i see, why i didn't think about this earlier lol. anyway thanks for your suggestion. – Hasan-Almujtaba Dec 19 '21 at 21:33

0 Answers0