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>