Question

我想在div中的card内slide内连续渲染carousel。我的逻辑是检查祖父母是否包含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进行此操作，那么我将在active而不是CSS class的祖父母中创建一个属性，并将其传递给它使用的控件并使用它为您的div。

但是，如果您更喜欢使用这种Javascript，则此部分似乎是错误的：

.contains('glide__slide--active')

您提到您需要使用active类。

Vue如何在v-if中获取元素引用

1 个答案: