使用 Tether 在 Vue 2.2.1 中操作 DOM 会导致错误。有正确的方法吗?
Manipulating DOM in Vue 2.2.1 using Tether is causing errors. Is there a right way to do it?
我正在尝试使用 tether
and vue 2.2.1
together. Here is a jsfiddle example: https://jsfiddle.net/awei01/fwttsa6o/2/
(我认为)tether
的作用:
如果系链 DOM 节点在正常文档流中(不是 position: absolute
),tether
代码将简单地添加一些样式属性来定位正确绑定元素
如果绑定的 DOM 节点有 position: absolute
,tether
将移动绑定的 DOM 节点并将其作为 [= 的子节点18=]。这给 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.
我试图通过摆弄 Popup
组件的 beforeDestroy
、destroyed
生命周期挂钩来解决这个问题,但它似乎没有帮助。
我在 react
中解决了这个问题,方法是简单地将拴系的 DOM 元素移回其在 componentWillUnmount
生命周期挂钩上的原始位置。
我想知道在 vue
中解决此问题的最佳方法是什么。我的另一个想法是先发制人地将一个新的 DOM 节点插入到 body
并强制 Popup
组件使用该节点进行渲染,但我不知道该怎么做。
如有任何建议,我们将不胜感激。谢谢
从 v-if
更改为 v-show
似乎可以解决问题。
<popup v-show="popup1" target="anchor1">
Some popup content
</popup>
我正在尝试使用 tether
and vue 2.2.1
together. Here is a jsfiddle example: https://jsfiddle.net/awei01/fwttsa6o/2/
(我认为)tether
的作用:
如果系链 DOM 节点在正常文档流中(不是
position: absolute
),tether
代码将简单地添加一些样式属性来定位正确绑定元素如果绑定的 DOM 节点有
position: absolute
,tether
将移动绑定的 DOM 节点并将其作为 [= 的子节点18=]。这给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.
我试图通过摆弄 Popup
组件的 beforeDestroy
、destroyed
生命周期挂钩来解决这个问题,但它似乎没有帮助。
我在 react
中解决了这个问题,方法是简单地将拴系的 DOM 元素移回其在 componentWillUnmount
生命周期挂钩上的原始位置。
我想知道在 vue
中解决此问题的最佳方法是什么。我的另一个想法是先发制人地将一个新的 DOM 节点插入到 body
并强制 Popup
组件使用该节点进行渲染,但我不知道该怎么做。
如有任何建议,我们将不胜感激。谢谢
从 v-if
更改为 v-show
似乎可以解决问题。
<popup v-show="popup1" target="anchor1">
Some popup content
</popup>