vue.js - 如何在 vue 3 中声明它的槽值的同一元素中使用槽值？

Question

我在 vue 3 中使用无头 ui，我想在公开打开时制作它有border-primary类。

这是我当前的代码：

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

如您所见，我已经尝试过使用:class="[open ? 'border-primary' : '']"in<disclosure></disclosure>但它不起作用，并且Block-scoped variable 'open' used before its declaration.在我的 vscode 中给了我这样的错误

我如何open使用价值<disclosure></disclosure>？