Rendering components if class is present

Question

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>

Answer 1

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')
  },
},