CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-directives
Jasmine Ibikunle
Jasmine Ibikunle

Reputation: 139

Rendering components if class is present

I need some help with a VUEJS project. I would like to render a component depending on whether a certain class is present.

LOGIC

If (class a) is present render (component a) If (class b) is present render (component b) If neither (class a) or (class b) is present render neither

  <section class="card" v-if="">
      <h3>{{title}}</h3>
      <p>{{subtitle}}</p>
  </section>

Upvotes: 0

Views: 309

Answers (1)

gavinclive
gavinclive

Reputation: 56

You can do this

Template:

<section class="card class-a class-b">
  <div v-if="isAPresent"></div>
  <div v-if="isBPresent"></div>
</section>

Just remove the class-a or class-b accordingly

Script:

computed: {
  isAExist () {
     return window.document.querySelector('section.class-a')
  },
  isBExist () {
     return window.document.querySelector('section.class-b')
  },
},

Upvotes: 2

Related Questions