Vue3: Zeigt bedingt ein Div für ein untergeordnetes Element an, basierend auf der Klasse des übergeordneten Div
Ich bin neu bei Vue und arbeite an diesem Beispiel für eine Aktivitätsklasse im Vue3-Karussell-Plugin. Ich möchte nur carousel__slide--active 类的文本和链接 div，但现在所有 carousel__items 都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active anzeigen, indem ich v-if oder v-bind ausführe, um image.text und image.link anzuzeigen, aber ich bekomme keines davon zum Laufen. Für jeden Rat wäre ich sehr dankbar.
Zugehöriger Code:
<Slide v-for="(image) in stack.images" :key="image">
<div class="carousel__item">
<img
:src="image.src"
:alt="image.alt"
:text="image.text"
:link="image.link"
/>
<!-- <div class="{ 'carousel__slide--active': true }"> -->
<!-- <div v-bind:class="{ 'carousel__slide--active': isActive }"> -->
<div class="overlay-shown">
<div v-if="image.text" class="stack-text">{{ image.text }}
</div>
<div v-if="image.link" class="stack-text">
<a v-bind:href="image.link">View Video</a>
</div>
</div>
<!-- </div> -->
</div>
</Slide>
<style>
.carousel__slide--active > .carousel__item {
transform: scale(1);
box-shadow: 8px 8px 5px -4px rgba(0, 0, 0, 0.5);
z-index: 999 !important;
}
.overlay-shown {
width: 600px;
height: auto;
background-color: #006eb7;
}
</style>
