vuejs2 - vue 过渡组出现事件未被调用
问题描述
我正在尝试挂钩出现事件的生命周期并调用组件中的方法,但从未调用组件中的方法 getCalled()。离开后事件的过渡动画按预期工作,它只是出现的事件没有。
根据文档https://vuejs.org/v2/api/#transition我可以像演示的那样挂钩出现事件系统。
<transition-group name="order" tag="div" appear v-on:after-leave="activateScrollToBottom" v-on:after-appear="getCalled" v-on:before-appear="getCalled" v-on:appear="getCalled">
解决方案
我有类似的情况,发现我错过了方法done
中的回调appear
。
我整理了一个非常简单的 CodePen 来查看它是否真的在工作 https://codepen.io/rowild/pen/LJvEKm
JavaScript:
let app = new Vue({
el: '#app',
methods:{
// Transition hooks
beforeAppear(el){
console.log(' BEFORE APPEAR')
},
appear(el, done){
console.log(' APPEAR')
},
afterAppear(el){
console.log(' AFTER APPEAR')
}
}
},
// Lifecycle hooks
beforeCreate(){
console.log("BEFORE CREATE")
},
[...]
模板
<div id='app'>
<transition
appear
@before-appear="beforeAppear"
@appear="appear"
@after-appear="afterAppear"
@appear-cancelled="appearCancelled"
:css="false"
>
<p>TEST CONTENT</p>
</transition>
</div>
控制台输出
BEFORE CREATE
CREATED
BEFORE MOUNT
BEFORE APPEAR
APPEAR
AFTER APPEAR
MOUNTED
如果您发现,您的问题是什么,您介意发表解释以及您是如何解决的吗?谢谢!
推荐阅读
- vuejs2 - Vue:如何根据事件流渲染一组组件?
- java - 为什么没有显式调用时调用默认函数?
- ios - rxswift 块生命周期
- sql - 如何使用 Oracle 中的条件获取月份数
- delphi - delphi 定义具有混合静态和动态元素的 const 多维数组
- java - 自定义页面的 JWT 标记化跳过 URL
- karate - 在空手道中运行功能文件时出现 Java.net.SocketTimeoutException
- angular - 如何根据Angular 8中的登录状态动态隐藏sidenav项目
- prometheus - Prometheus:检测指标的创建(同名,不同标签)
- database - 如何在数据库中持久化 Celery 队列