Search code examples
domvue.jsvuejs2vue-componenttether

Manipulating DOM in Vue 2.2.1 using Tether is causing errors. Is there a right way to do it?

I'm trying to use tether and vue 2.2.1 together. Here is a jsfiddle example: https://jsfiddle.net/awei01/fwttsa6o/2/

What (i think) tether does:

  • If the tethered DOM node is inside the normal document flow (not position: absolute), the tether code will simply add some style attributes to position the tethered element correctly

  • If the tethered DOM node has position: absolute, tether will move the tethered DOM node and place it as a child of body. This is causing problems for vue. Specifically, an exception is thrown: DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I've tried to solve this issue by fiddling with the beforeDestroy, destroyed lifecycle hooks of the Popup component, but it doesn't seem to help.

I was able to solve this issue in react by simply moving the tethered DOM element back to its original position on componentWillUnmount lifecycle hook.

I'm wondering what is the best way to solve this issue in vue. Another thought I had was to preemptively insert a new DOM node to body and force the Popup component to use that node to render, but I couldn't figure out how to do that.

Any suggestions are appreciated. Thanks

Solution

  • Changing from v-if to v-show seems to fix the issue.

    <popup v-show="popup1" target="anchor1">
    Some popup content
</popup>