Subscribe on changes!

使用ref绑定组件,同时用 v-if控制组件刷新,本地运行正常,打包之后刷新组件报错

avatar
Mar 22nd 2023

Vue version

3.2.13

Link to minimal reproduction

xiexie

Steps to reproduce

let showEdit = ref(false) let ckeditorInstance = ref(null)

onMounted(() => { show.value = true })

const reloadCkeditor = () => { show.value = false nextTick(() => { show.value = true }) }

What is expected?

能保持跟本地运行时一致,打包之后不报错,组件中使用一些原生的插件需要通过v-if来刷新

What is actually happening?

run serve不报错,run build 发布之后报错

System Info

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.

Any additional comments?

No response

avatar
Mar 22nd 2023

请给出一个最小化且可以复现的demo

avatar
Mar 22nd 2023

谢谢,已经找到原因了解决了。由于子组件只包含一个单标签供ckeditor绑定,渲染后子组件标签同级有ckeditori创建的html标签。使用v-if销毁组件时,在子组件 beforeUnmount 钩子中调用了 ckeditor.destroy() 方法,冲突了。解决方法是为ckeditor绑定标签增加父标签,绑定的不能是组件顶层标签