Can v-if trigger something? Does v-if raise an event?

user_1585345 0
Viewed 7304

I would like to catch an event and do something when v-if toggles. A conditionally rendered element is rendering. It should be possible to get notified of this, no?

vuejs2 vue.js
4 Answers

I had this exact topic with a popup that needs to be filled first (via v-if) and then animated with GSAP.

The binding is bonded with the clearance of a function

 <section class="PopupBlok" v-if="$store.state.popup && animateOpen()">

But since the function needs to "give its ok" by returning true, you can't directly animate in the animateOpen() function. To fix this, you postpone your animation for one tick like so:

 animateOpen() {
  this.$nextTick(() => { <Do Animation here> })
  return true

}

Therefore your function gives it's OK, and in the next loop all elements are available for animation.

I assume it would work with setTimeout as well, but $nextTick is the vue-way

user_193515360
Related