before-leave transition JavaScript hook not working Vue js

Question

My variable, transitionName, is not changing in the beforeLeaveHook. The value of transitionName remains to be 'right' when it should change to 'left'. Please help.

<template lang="pug">
    transition(:name="transitionName" v-on:before-leave="beforeLeaveHook")
        .componentMain
            h1 {{transitionName}}
</template>

<script>
 export default {
 name: 'Component',
 data () {
  return {
    transitionName: 'right',
  }
 },
 methods: {
   beforeLeaveHook: function(event){
   this.transitionName = 'left';
   }
 }
 }
</script>

Answer 1

The before-leave event won't fire until you remove the .componentMain element.

Here's an example:

new Vue({
  el: '#app',
  data () {
   return {
     transitionName: 'right',
     show: true,
   }
  },
  methods: {
    beforeLeaveHook() {
      this.transitionName = 'left';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition :name="transitionName" v-on:before-leave="beforeLeaveHook">
    <div class="componentMain" v-if="show">
      <h1>
        {{transitionName}}
      </h1>
    </div>   
  </transition>
</div>

Answer 2

Thanks for the help. I needed route specific transitions for my app. I solved the problem using beforeRouteUpdate(to, from, next) in the parent component to check the from and to paths before calling next(), in order to set the correct transition, using Vuex, and then using a computed property in my child component to listen for the transitionName change.