Question

我的变量transitionName在beforeLeaveHook中没有变化。当transitionName更改为“left”时，其值仍为“正确”。请帮忙。

<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

在删除before-leave元素之前，.componentMain事件不会触发。

以下是一个例子：

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

感谢您的帮助。我需要为我的应用程序路由特定的转换。我在父组件中使用beforeRouteUpdate（to，from，next）来解决问题，在调用next（）之前检查from和to路径，以便使用Vuex设置正确的转换，然后在我的孩子中使用计算属性用于侦听transitionName更改的组件。

离开前转换JavaScript挂钩不工作Vue js

2 个答案: