PeachScript
Cannot trigger automatically after reset when used transition feature in list
The following content was from here：
One a side note, when you do this
changeFilter() { this.list = []; this.$nextTick(() => { this.$broadcast('$InfiniteLoading:reset'); }); },
if you have a stagger transition on your for item like v-for="item in list" transition="bounce" stagger="100" the data will not auto reload on change like your demo, you must scroll
via @packytagliaferro
The $nextTick just detect the next DOM update, but the items didn't be removed when the $nextTick be triggered if you used the transition feature, so we need use the transition hook to send the $InfiniteLoading:reset event, such as afterLeave hook. The document is here.
Hope can help you @packytagliaferro.
@PeachScript can you show an exemple ? because we don't have access to the component in transition definition
Aha...Maybe I thought it too simple? I will try it and add a example into the GitHub Pages.
But I was on vacation, I have to delay to add the example, so sorry.
no problem. Well as there's no access to the component and as i dn't really like to scatter logic in places where it should not, i'd like to see an exemple whenever you have time
2016-09-29 16:55 GMT+02:00 Peach [email protected]:
Aha...Maybe I thought it too simple? I will try it and add a example into the GitHub Pages.
But I was on vacation, I have to delay to add the example, so sorry.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/PeachScript/vue-infinite-loading/issues/11#issuecomment-250490772, or mute the thread https://github.com/notifications/unsubscribe-auth/APJ6Xgji6yJpc_Y9l8e21PAd36rRdDAVks5qu9FygaJpZM4KEK95 .
Mutum à vous,
https://www.mutum.fr/
- Ariel Dorol*
Lead développeur Front-end --------------------------------------------- [email protected] 06 67 53 91 91 www.mutum.fr -* 54, avenue Lénine, 94250 Gentilly* https://www.facebook.com/mutum.fr https://twitter.com/mutum_fr https://instagram.com/mutum_fr/
http://www.mutum.fr/
@manniL sorry, no progress now...I try the transition hooks to implement it but it is too complex, I did not find an elegant way, so it is temporarily shelved
I just came across the bug too. Would appreciate help a lot. Workaround in the meantime: Set a single transition per element, on which you do: v-if="created" and set created to true in created() hook.
I just use transition hooks to solve the problem.
<transition-group v-on:after-leave="afterLeave">
</transition-group>
afterLeave () {
this.$nextTick(() => {
this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
})
}
@nathanzhang1992 good idea! I've tried to handle hooks through this component, but it is difficult, deal with outside maybe the real right way.