Transformasi CSS berdasarkan perubahan kelas bersyarat tidak berfungsi apabila menggunakan vuejs dan tailwind

Question

我正在尝试使用 tailwind peralihan 类来展开侧边栏 Vuejs 内的 子菜单 组件。

// templat

<div
    :class="`${index === 0 ? 'mt-2' : ''} sidebar-link sidebar-dropdown-link`"
    @click="link.open = !link.open"
>
    <div class="flex items-center">
        <FontAwesomeIcon
            :icon="link.icon"
            class="ikon pautan-bar sisi"
        />
        {{ link.label }}
    </div>
    <FontAwesomeIcon
        :icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']"
        class="bar sisi-dropdown-link-icon"
    />
</div>

// Ini baris lucu...
<div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} sidebar-dropdown-menu`">
    <pautan penghala
        v-for="(subpautan, indeks) dalam pautan.subpautan"
        :key="indeks" class="pautan-bar sisi mt-1"
        :to="sublink.route"
    >
        <FontAwesomeIcon
            :icon="sublink.icon"
            class="ikon pautan-bar sisi pl-3"
        />
        {{ sublink.label }}
    </router-link>
</div></pra>
<p>Tingkah laku yang dijangkakan ialah apabila <code>link.open</code> menjadi <code>true</code>, <code> ditakrifkan dalam <strong>baris yang menarik< ;</code>tag/strong> mengembang (atau memaparkan) dengan peralihan 300 milisaat, nilai <kod>tinggi</code>nya telah dilaraskan berdasarkan <code>link.sublinks.length</code> Takrifan nilai, yang kesemuanya menggunakan kelas <kod> Apa yang saya maksudkan ialah: </p>
<pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] }

Jika link.sublinks.length sama dengan 3, kelas tersuai yang digunakan ialah h-[135px] ; dan teg

dalam baris lucu penukaran tidak berfungsi. Alat Pembangun Google Chrome menunjukkan kepada saya tinggi: 135px

Akhir sekali, jika saya menggantikan h-[${link.sublinks.length * 45}px] dengan nilai tetap (cth. h-[200px]< /code>) semuanya berfungsi seperti yang diharapkan.

Saya mengesyaki h-auto mengatasi kelas tersuai ketinggian saya.

Saya orang Latin, jadi bahasa Inggeris saya tidak begitu baik.

Terima kasih terlebih dahulu.

Answer 1

Saya telah berjaya, tetapi saya tidak suka penyelesaian yang saya temui:

<div
    :style="`${link.open ? `height: ${link.sublinks.length * 45}px` : 'height: 0px'}`"
    class="sidebar-dropdown-menu"
>

Elakkan sahaja menggunakan kelas Tailwind untuk menentukan atribut ketinggian, itu sahaja buat masa ini.