我正在尝试使用 tether
和 vue 2.2.1
一起。这是一个 jsfiddle 示例:https://jsfiddle.net/awei01/fwttsa6o/2/
什么(我认为)tether
做:
如果绑定(bind)的 DOM 节点位于正常文档流中(不是
position: absolute
),则tether
代码将简单地添加一些样式属性以正确定位系留元素如果绑定(bind)的 DOM 节点有
position: absolute
,tether
将移动绑定(bind)的 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
的生命周期 Hook 组件,但它似乎没有帮助。
我能够在 react
中解决这个问题只需将绑定(bind)的 DOM 元素移回其在 componentWillUnmount
上的原始位置即可生命周期钩子(Hook)。
我想知道在 vue
中解决此问题的最佳方法是什么.我的另一个想法是抢先插入一个新的 DOM 节点到 body
并强制 Popup
组件使用该节点进行渲染,但我不知道该怎么做。
如有任何建议,我们将不胜感激。谢谢
最佳答案
从 v-if
更改为 v-show
似乎可以解决问题。
<popup v-show="popup1" target="anchor1">
Some popup content
</popup>
关于dom - 使用 Tether 在 Vue 2.2.1 中操作 DOM 会导致错误。有正确的方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42722079/