使用Tether在Vue 2.2.1中操作DOM会导致错误。有没有正确的方法呢？

Question

我试图一起使用tether和vue 2.2.1。这是一个jsfiddle示例：https://jsfiddle.net/awei01/fwttsa6o/2/

我认为tether做了什么：

• 如果系留DOM节点位于普通文档流程内（不是position: absolute），tether代码将只添加一些样式属性来正确定位系留元素

  < / LI>

• 如果系留DOM节点有position: absolute，tether将移动系留DOM节点并将其置为body的子节点。这会导致vue出现问题。具体而言，抛出异常：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.

我试图通过摆弄beforeDestroy组件的destroyed，Popup生命周期钩子来解决此问题，但它似乎没有帮助。

我能够通过简单地将系留DOM元素移回react生命周期钩子上的原始位置来解决componentWillUnmount中的这个问题。

我想知道在vue中解决此问题的最佳方法是什么。我的另一个想法是抢先将新的DOM节点插入body并强制Popup组件使用该节点进行渲染，但我无法弄清楚如何做到这一点。

任何建议都表示赞赏。感谢

Answer 1

从v-if更改为v-show似乎解决了这个问题。

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