Better support for usage inside the component template

[lazabogdan]

Consider the following example, where we can have the v-transfer-dom directive applied to the main template element of the modal component directly, so it will always transfer the modal to the body without having to explicitly use the directive on the modal component:

http://jsfiddle.net/lazabogdan/wobmzd87/

The example above works only in combination with v-if applied to the main template element of the modal component. If you'd replace v-if with v-show, it won't work and v-if feels more like a hack to make this work.

Let me know what you think.

[rhyzx]

This is related to the internal mechanism of Vue, see http://vuejs.org/guide/components.html#Fragment_Instance.

Vue instance need the root element in the original position, and vue will wrap root element as an fragment and treat this fragment as root element if detected directives will change the root element position, this is why v-transfer-dom can work with v-if, but not v-show.

Workaround for this is turn it into an fragment instance, such as multiple top-level elements (just add a comment tag) http://jsfiddle.net/9gb0o905/1/

[rhyzx]

By the way, v-if is a better choice for modal in my opinion.

[lazabogdan]

Thanks for the explanation.
You're right, v-ifis definitely a better choice for a modal, just happened to use that as an example.