Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report]: 测试vue组件,出现“this.vm.$destroy is not a function”错误 #1848

Closed
raingend opened this issue Sep 4, 2024 · 6 comments
Assignees
Labels
bug Something isn't working

Comments

@raingend
Copy link

raingend commented Sep 4, 2024

发生了什么?

我在测试vue组件功能的时候遇到问题。我只做了个设计器页面和一个Vue组件的页面,设计器页面我是这样写的
'''

<script> …… import { register } from '@logicflow/vue-node-registry'; import VueNode from "./vueNode.vue"; export default { name: "flowDiagram", data() { return { lf: null, drawer: false, currentNode: null, }; }, mounted() { //初始化 this.lf = new LogicFlow({ container: this.$refs.container, //使用Dnd面板 plugins: [DndPanel], }); // 注册vue组件 register( { type: 'VueNode', component: VueNode }, this.lf ) this.lf.extension.dndPanel.setPatternItems( [ { type: 'VueNode', text: 'Vue节点', icon: require('@/assets/img/delete.jpg'), }, ] ) // 默认添加一个节点,并渲染出来 this.lf.render( { nodes: [ { id: 50, type: 'VueNode', x: 100, y: 150, text: '你好', }, ], } ); }, methods: { handleClose(done) { done(); }, }, } </script>

'''

vue组件的代码也很简单
'''


{{ labeltext }}

<script> export default { name: 'VueNode', data() { return { labeltext: "hi there" } }, mounted() { this.labeltext = this.labeltext + "1" } } </script>

'''
运行起来后,没问题
Z@OKG$6B 9_ 9371_{JIU2
从Dnd面板拖动组件到设计器中也正常
XJF(YBPK@FD@EL5~VW%0GE](https://github.com/user-attachments/assets/8bf039f1-daae-4bbd-bbc1-71b697defe29) 松开鼠标时,报错“this.vm.$destroy is not a function” ![36C441) 49@ {CC%@MCOZR

logicflow/core版本

2.0.3

logicflow/extension版本

2.0.5

logicflow/engine版本

No response

浏览器&环境

Microsoft Edge

@raingend raingend added the bug Something isn't working label Sep 4, 2024
@DymoneLewis
Copy link
Collaborator

没看懂,所以是怎么触发的这个报错?

@DymoneLewis
Copy link
Collaborator

在群里看到了,方便提供一下demo吗,这边排查一下

@boyongjiong
Copy link
Collaborator

麻烦提供一下复现 demo,这个描述我们无法定位问题,没有复现 demo 我们会对此 issue 做关闭处理

@boyongjiong boyongjiong self-assigned this Sep 9, 2024
@xwatsonmai
Copy link

xwatsonmai commented Sep 12, 2024

+1 我也遇到这个bug,就是把vue节点注册到dndPanel里,然后从拖拽面板里把vue节点拖出来的时候就可以复现出这个问题了

更新:
我知道是啥问题了,要按照vue自定义节点里说明的,引入const TeleportContainer = getTeleport(),然后在模板里使用:
<TeleportContainer />
就能解决这个问题了。。。

说时候我觉得这种方法有点奇怪,有一丢丢额外的心智负担,不过能用就好

@boyongjiong
Copy link
Collaborator

+1 我也遇到这个bug,就是把vue节点注册到dndPanel里,然后从拖拽面板里把vue节点拖出来的时候就可以复现出这个问题了

更新: 我知道是啥问题了,要按照vue自定义节点里说明的,引入const TeleportContainer = getTeleport(),然后在模板里使用: <TeleportContainer /> 就能解决这个问题了。。。

说时候我觉得这种方法有点奇怪,有一丢丢额外的心智负担,不过能用就好

可以抽空给我们提供个例子看看吗?想了解下前因后果全貌

@boyongjiong
Copy link
Collaborator

@logicflow/[email protected] 应该已经解决了该问题,可以升级使用 #1895

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants