CODEWITHSUNDEEP
javascriptvue.jsvuejs3
FabricioG
FabricioG

Reputation: 3320

How to get class name from current binded element using Vue

I currently have this div:

 <div class="center-align" :class="setDisplay()">
    <div class="lds-hourglass"></div>
  </div>

I need to check if "this" div contains "center-aligh" to execute code in setDisplay:

In my Vue 3 setup I have:

setup() {
  const setDisplay = () => {
    console.log(this.$el);
  }
}
return {
  setDisplay
}

this.$el returns as undefined. From what I've read I would return it like so: this.$el.className based on this answer But it's not working. Any idea what I'm doing wrong?

Upvotes: 2

Views: 300

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

You can use ref in setup function and with nextTick get class in mounted hook with value.classList :

const { ref, onMounted, nextTick } = Vue
const app = Vue.createApp({
  setup() {
    const el = ref(null)
    const myClass = ref(null)
    
    const setDisplay = () => {
      myClass.value = 'myclass'
    }
    
    onMounted(async () => {
      await nextTick()
      console.log(Array.from(el.value.classList))
      Array.from(el.value.classList).includes('center-align') &&  setDisplay()
    })
    
    return { setDisplay, el, myClass }
  }
})
app.mount('#demo')
.myclass {
  color: red;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="center-align xxx" ref="el" :class="myClass">
    <div class="lds-hourglass"></div>
    class applied
  </div>
</div>

Upvotes: 1

Related Questions