Vue: Child element removed before 'beforeDestroy' of parent component called with 'v-if'?

[Zhangdroid]

Version

2.4.1

Reproduction link

https://codepen.io/zhangzhuo/pen/pwYgdW

Steps to reproduce

Open https://codepen.io/zhangzhuo/pen/pwYgdW and click 'click it', see what happen in console.

What is expected?

console.log should show the size of the element.

What is actually happening?

Got '{width: 0, height: 0 ...}'

---

The child element will removed from document before 'beforeDestroy' called, is this intended or?

[bartdonninger]

I got kind of a similar situation.

I got two components:
ParentComponent
--ChildComponent

The ParentComponent is deleted when a v-if condition is met. This triggers the 'beforeDestroy' on the ParentComponent and seems to remove the DOM elements within the ParentComponent (and thus the ChildComponent). After that the 'beforeDestroy' on the ChildComponent is triggered, in here my ChildComponent looks for something in DOM which isn't there anymore.

Shouldn't the ChildComponents 'beforeDestroy' be triggered first? Or is there a better approach to solve this problem?

[jo0ger]

+1

@Zhangdroid @bartdonninger I've been troubled by this problem for many days

[posva]

This is actually expected because the element is no longer in the DOM when the beforeDestroy triggers. Fortunately, in that specific scenario, when you need to get an element size, you can append it back to the document (or any other element) and compute sizes before removing it: http://jsfiddle.net/posva/3mrer9a2/

[Zhangdroid]

@posva Thanks for your reply, but I still got some trouble.

I try to build vue version of react-overdrive, it need to get the size and position before component destroyed, is there any way to get it? Thanks again.

[nickmessing]

@Zhangdroid, please use forum or chat for questions. As an alternative consider beforeUnmount instead of beforeDestroy

[jo0ger]

@Zhangdroid Hey, buddy, I'm trying to build Vue version of react-overdrive too