Class binding not responding to switching object value within a click method

[rguttersohn]

Hey there,

Really enjoying Petite Vue so far.

I am trying to reapply a class to an element every time on click. I'm binding the class to a store value that is initially set to false. In my click method, I set the value to false then back to true in order for the class to reapply. However, after adding the class the first time, it seems that the binding is not reacting to my false/true switch. (In other words, I cannot remove the class after it's added)

I am pretty sure this is how I've similarly approached this in past Vue projects. Is this an issue with Petite Vue or am I approaching this wrong?

I've grabbed minimal code and pasted below:

let store = PetiteVue.reactive({
      addFlash: false,
})

 function Sections(){
  return {
    store,
    $template: '#sections',
    clickMethod (){
      store.addFlash = false;
      store.addFlash = true;
    },
  }
}

From the template:

<h2 :class="{'animate-flash' : store.addFlash}">{{ header }}</h2>

Thanks much for the help.

[halivert]

You need to wait for the next repaint, to show you the expected results.
You can do it with setTimeout() https://codepen.io/halivert/pen/ExwzXQj or (as stated by Hiws) with requestAnimationFrame https://codepen.io/Hiws/pen/vYewJzv.

[rguttersohn]

Appreciate the help.