javascript - vue如何获取v-if中元素的元素引用

Question

我想在 card 中有条件地呈现 div，这是 carousel 中的 slide。我的逻辑是检查祖 parent 是否包含 active class 然后使用 v-if 来确定它是否应该被渲染但是这个似乎不起作用，我是 VUE 的新手，但我们将不胜感激。

    <vue-glide-slide v-for="(offer,index) in offers" :key="index" ref="offerElement">
      <div class="card">
        <img :src="offer.icon" class="card-img-top offer-image" :alt="offer.title" />
        <div class="card-body mb-5">
          <h5 class="card-title px-3">{{offer.title}}</h5>
          <div v-if="this.parentElement.parentElement.parentElement.classList.contains('glide__slide--active')">
            <p class="card-text">{{offer.description}}</p>
            <button
              class="btn btn-main btn-home"
              type="button"
              @click="displayIfActive"
            >View details</button>
          </div>
        </div>
      </div>
    </vue-glide-slide>

Answer 1

最简单的是:

.active h5.card-title > div {
    /*Some extra rules that override the default rules*/
}

但是，如果您需要使用 Vue JS 执行此操作，那么我会在祖 parent 中为 active 而不是 CSS class 创建一个属性，并将其传递给控制它的使用并将其用于您的 div。

如果您更喜欢这种 Javascript，那么这部分似乎是错误的:

.contains('glide__slide--active')

您提到您需要使用 active 类。