CODEWITHSUNDEEP
javascriptvue.js
Mitchell Yuen
Mitchell Yuen

Reputation: 335

Vue how to get the element reference on the element in v-if

I want to conditonally render a div within a card that's a slide in a carousel. My logic is to check whether the grandparent contains the active class and then use v-if to determine whether it should be rendered or not however this does not seem to work, I am new to VUE but any suggestion would be appreciated.

    <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>

Upvotes: 3

Views: 519

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 77012

The simplest would be something of the like of:

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

But if you need to do this with Vue JS, then I would create a property in the grandparent for active rather than a CSS class and would pass that to the controls it uses and use that for your div.

If you prefer to have this kind of Javascript though, then this part seems to be wrong:

.contains('glide__slide--active')

You mentioned that you need to work with the active class instead.

Upvotes: 2

Related Questions