alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs): correct controlled flow docs and replace applyChanges with applyDefault (#1574)

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2024-08-14 10:21:33 +02:00
committed by GitHub
parent 3fc0b12ffc
commit 876c19868f
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/controlled-flow.md
+5 -5
View File
@@ -82,23 +82,23 @@ removeNodes('1')
</script> </script>
``` ```
## The `applyChanges` option ## The `applyDefault` option
The `applyChanges` option is a prop that can be passed to the `<VueFlow>` component to enable or disable automatic change handling. The `applyDefault` option is a prop that can be passed to the `<VueFlow>` component to enable or disable automatic change handling.
By setting this option to `false`, we tell Vue Flow to not apply changes automatically anymore, By setting this option to `false`, we tell Vue Flow to not apply changes automatically anymore,
that way we can take control of changes and apply them manually. that way we can take control of changes and apply them manually.
```vue ```vue
<template> <template>
<VueFlow :nodes="nodes" :edges="edges" :apply-changes="false" /> <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
</template> </template>
``` ```
## `onNodesChange` / `onEdgesChange` events ## `onNodesChange` / `onEdgesChange` events
Vue Flow provides two events that can be used to listen to changes on nodes and edges. Vue Flow provides two events that can be used to listen to changes on nodes and edges.
These events are emitted regardless of the `applyChanges` option, so you can use them to listen to changes even if you have automatic changes enabled. These events are emitted regardless of the `applyDefault` option, so you can use them to listen to changes even if you have automatic changes enabled.
```vue ```vue
<script setup> <script setup>
@@ -150,7 +150,7 @@ const onChange = (changes) => {
Using what we just learned, we can now take control of changes and apply them manually. Using what we just learned, we can now take control of changes and apply them manually.
In this example, we will first disable automatic change handlers with `applyChanges`, In this example, we will first disable automatic change handlers with `applyDefault`,
then use the `onNodesChange` event to listen to changes and validate delete changes and, then use the `onNodesChange` event to listen to changes and validate delete changes and,
if they are valid, use `applyNodeChanges` to apply them. if they are valid, use `applyNodeChanges` to apply them.