Comments (11)
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.
Error will be reported at this time.If i don't modify the data of the node, will connect normally.
from vue-flow.
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.
from vue-flow.
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.
from vue-flow.
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.
from vue-flow.
Are you using the latest version or are you on another one?
from vue-flow.
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 😄
from vue-flow.
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,
}
from vue-flow.
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.
from vue-flow.
Also
edgeType
is not a valid property for edges. There is onlytype
for edges and nodes, so you code should be changed toconst newEdge = { id: uuidv4(), source, target, type: edgeType, markerEnd: MarkerType.ArrowClosed, }
Wrong here, the code is type
from vue-flow.
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.
from vue-flow.
Also
edgeType
is not a valid property for edges. There is onlytype
for edges and nodes, so you code should be changed toconst 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.
from vue-flow.
Related Issues (20)
- 🐛 [BUG]: Strange edge behaviour for type 'smoothstep' and 'step' HOT 2
- 🐛 [BUG]: multi-selection-key-code property error HOT 4
- 🐛 [BUG]: Background lines mode is invalid HOT 2
- 🐛 [BUG]: <title> vue-flow is not hack with uniapp-h5-vue HOT 3
- 🐛 [BUG]: [Vue warn]: Invalid prop name: "ref" is a reserved property. HOT 2
- 🐛 [BUG]: some event Types are missing (nodeClick, nodeDoubleClick, ...) HOT 6
- 🐛 [BUG]: Register a custom component for repeated rendering HOT 2
- 🐛 [BUG]: Nuxt3 Hydration attribute mismatch HOT 9
- 🐛 [BUG]: Node added in `onMounted()` is not rendered HOT 2
- 🐛 [BUG]: Canvas captures scroll even when all scroll-related features are disabled HOT 15
- 🐛 [BUG]: useNodesData is not available in "@vue-flow/core" library, but is refernced in the documentaion, and also in examples
- 🐛 [BUG]: Devtool throws warning when using node resizer HOT 2
- 🐛 [BUG]: `pathOptions` for default edges aren't applied HOT 1
- 🐛 [BUG]: flickering on some phone browsers HOT 4
- 🐛 [BUG]: Wrong edge position with dynamic handle id HOT 5
- 🐛 [BUG]: When typing, CMD + Backspace or Shift + Backspace can delete selected element HOT 1
- 🐛 [BUG]: Docs (vueflow.dev) hangs and never loads on iOS Safari HOT 2
- 🐛 [BUG]: Auto-generated Handle ids change with position
- 🐛 [BUG]: <title> manual control <Handle /> graph line confusion HOT 1
- 🐛 [BUG]: manual control <Handle /> graph line confusion HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-flow.