CODEWITHSUNDEEP
javascriptcssvue.jsvuejs3vue-composition-api
atx123n
atx123n

Reputation: 53

Vue JS 3 binding class does not update the class

HTML Section where i want to activate the mobile section in two spots

    <i @click="mobileClick" :class="[{ 'bi-x': menuOpen }, { 'bi-list': !menuOpen },'mobile-nav-toggle', 'bi']"></i>

JS functions called on click to switch the classes

setup(){

let menuOpen=  false

  const mobileClick = () =>{
  menuOpen = !menuOpen
  console.log(menuOpen)
   }
 return{mobileClick,  menuOpen}
}

the boolean updates on click but the classes do not... Do I have to re-render or something?

Upvotes: 1

Views: 771

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Your property should be defined as a ref which is accessed by value field in your script :

import {ref} from 'vue';
export default {

 setup(){
    
    const menuOpen=  ref(false)

     const mobileClick = () =>{
     menuOpen.value = !menuOpen.value
     console.log(menuOpen.value)
    }
    return{mobileClick,  menuOpen}
   }

}

in template no need to use value field :

<i @click="mobileClick" :class="[{ 'bi-x': menuOpen }, { 'bi-list': !menuOpen },'mobile-nav-toggle', 'bi']"></i>

Upvotes: 3

Related Questions