vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

$el.ownerDocument.defaultView is null on `ready` and `attached` states #318

Open platov opened 9 years ago

platov commented 9 years ago

After calling

ready(){
    new Hammer(this.$el);
}

i have got error - Uncaught TypeError: Cannot read property 'addEventListener' of undefined

though instantiating the Hammer in created hook works fine

After debugging i realize that only at ready and attached hooks the component element $el.ownerDocument.defaultView is null what unexpected for Hummer.js

This is not critical for me, just proribably it can be a bug into Vue core

yyx990803 commented 9 years ago

Not sure how this could possibly happen... can you provide a reproduction?

platov commented 9 years ago

http://jsfiddle.net/8wenpkaL/2/

This issue reproduced only with next conditions:

Component rendered through<component> special element. though <my-component ></my-component> record doesn't reproduce that issue.

AND

The record <component is="..."> has v-if expression though if remove v-if expression then issue will not reproduce, Example:

<component is="..." v-if="..."></component>

AND

<component> special element wrapped with <template v-if="..."> special element WITH v-if expression though if remove v-if expression or will use <div> instead <template> then issue will not reproduce. Example:

<template v-if="true">
    <component v-if="true" is="my-component"></component>
</template>

So, that's it =) Not critical, if You will have a time - look at this issue, thanks

swift1 commented 9 years ago

Lifecycle: created beforeCompile component created component beforeCompile component compiled component attached component ready compiled attached ready

The change in ownerDocument happens when the cycle goes from compiled to attached: http://jsfiddle.net/8wenpkaL/4/

The resason is probably that when the component gets attached to the template, the template is the ownerDocument. The component gets attached to the template after it is compiled.

<test-component v-if="..."></test-component> produces the same result. It's only when you remove the template that you get the same ownerDocument throughout the whole cycle. So it's hardly a bug.

platov commented 9 years ago

Yeah, thanks for clarification =) sorry for spending your time

swift1 commented 9 years ago

I just noticed that if you remove v-if="show" from the component, the ownerDocument stays the same throughout the whole cycle (like you wrote). So I find that a bit strange, but I don't know the full internals of the library. But anyway, the solution might be to remove the if-statement from the component (but not from the template).

platov commented 9 years ago

swift1, interesting. Let Mr. Evan You will say his thoughts