dom - 使用 Tether 在 Vue 2.2.1 中操作 DOM 会导致错误。有正确的方法吗?

标签 dom vue.js vuejs2 vue-component tether

我正在尝试使用 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/

相关文章:

javascript - 在dom元素中插入span而不覆盖子节点?

javascript - 关闭 HTML 选择元素时是否会触发 DOM 事件?

css - 使用 Transition 在 Vuejs 中的 v-if 上设置动画高度

javascript - 如何测试 vue.js v-select 组件的值

javascript - 如何在我的 Vue 项目中设置 vue-burger-menu

laravel - 如何在tinymce中忽略html标签| Vuejs 和 Laravel

javascript - 是入口点,ES6 模块

javascript - 函数内变量的值随时间变化而无需重新分配

javascript - 使用 Vue CLI - 如何更新、删除和查看所有可用插件

javascript - Vue过渡动画不播放但保持其动画持续时间