When I modify the value of the data of the custom node, then connect the line, an error will be reported.

[LuRM]

Hi! Both my nodes and edges are custom.
When I modify the value of the data of the custom node, then connect the line, an error will be reported.

[bcakmakoglu]

Any more information so that I can actually look at the issue?
Code examples? Reproduction?
Anything?

This tells me literally nothing except that you can do screenshots.

[LuRM]

I didn't describe it clearly enough.

<vue-flow
      ref="vueFlow"
      @dragover="onDragOver"
      class="vue-flow-container"
      v-model="elements"
      :zoom-on-pinch="false"
      :zoom-on-double-click="false"
      @connect="onConnect"
      style="background: #F5F6FA;"
>
    <!--custom node-->
</vue-flow>

Next, I will modify the data of the node.

onConnect

Error will be reported at this time.If i don't modify the data of the node, will connect normally.

[bcakmakoglu]

Are you using the latest version or are you on another one?

[bcakmakoglu]

Also is there any more to the error?
Any message that says more than the one's in the screenshot?
Those just indicate that Vue wasn't able to replace an element, which doesn't really tell me why 😄

[bcakmakoglu]

Also edgeType is not a valid property for edges.
There is only type for edges and nodes, so you code should be changed to

const newEdge = {
	id: uuidv4(),
	source,
	target,
	type: edgeType,
	markerEnd: MarkerType.ArrowClosed,
}

[bcakmakoglu]

Are you possibly using the data to render components in your node?
It might be that when you "reset" your data obj to {} you cause those components to crash due to missing properties?

I tried to emulate your case and didn't receive any errors for it; Here's a sandbox

I would assume that nothing is wrong with VueFlow's behavior and the issue is somewhere in your structure instead.
Vue Flow doesn't really care about your data property anyway, it's just passed through to your components and not handled by the flow at all.

[LuRM]

Also edgeType is not a valid property for edges. There is only type for edges and nodes, so you code should be changed to

const newEdge = {
	id: uuidv4(),
	source,
	target,
	type: edgeType,
	markerEnd: MarkerType.ArrowClosed,
}

Wrong here, the code is type

[LuRM]

Are you possibly using the data to render components in your node? It might be that when you "reset" your data obj to {} you cause those components to crash due to missing properties?

I tried to emulate your case and didn't receive any errors for it; Here's a sandbox

I would assume that nothing is wrong with VueFlow's behavior and the issue is somewhere in your structure instead. Vue Flow doesn't really care about your data property anyway, it's just passed through to your components and not handled by the flow at all.

Yes. I use data to render the component in my node. But the error content is about flow. I also checked the code, data property are not missing.

[bcakmakoglu]

Also edgeType is not a valid property for edges. There is only type for edges and nodes, so you code should be changed to

const newEdge = {
	id: uuidv4(),
	source,
	target,
	type: edgeType,
	markerEnd: MarkerType.ArrowClosed,
}

Wrong here, the code is type

Mh? Your screenshot clearly showed edgeType?^^

What do you mean the error content is about flow?
Where in the error messages you showed me is there any mention of flow?

If there is more to the error, please post it here - even better, if you can give me a reproduction (using the sandbox for example) on how to recreate the error, that'd be great.
Otherwise I'm grasping at straws here.

[LuRM]

I mean, in my code, I use type. edgeType here it is written wrong.
I am currently using the latest version. Sorry, here is indeed the vue error.

I will try to reproduce in the sandbox.

[LuRM]

Hi, I found the reason for the error. Not related to vue-flow, thank you very much for your reply. I will close this issue.
Thank you also for providing such a useful component.