File tree Expand file tree Collapse file tree 1 file changed +7
-19
lines changed Expand file tree Collapse file tree 1 file changed +7
-19
lines changed Original file line number Diff line number Diff line change 1
1
# Connection Validation
2
2
3
- Connections can be validated before edges are created and nodes get connected.
3
+ To validate connections before they are created you can either pass a function to the ` is-valid-connection ` prop of the ` <Handle /> ` component
4
+ or use the ` onConnect ` event of the ` <VueFlow /> ` component.
5
+
6
+ Another alternative is to pass a ` isValidConnection ` function to the ` is-valid-connection ` prop of the ` <VueFlow /> ` component.
7
+ This function will be applied to * all* connections in the flow (even existing ones).
4
8
5
9
## Using a handle in a custom node
6
10
7
11
``` vue
8
12
<div>
9
- [ ... ]
10
-
11
- <Handle type="source" :is-valid-connection="isValidConnection" />
13
+ <!-- ... -->
14
+ <Handle type="source" :is-valid-connection="isValidConnection"/>
12
15
</div>
13
16
```
14
17
15
- ## Passing as node option
16
-
17
- ``` ts
18
- const nodes = [
19
- {
20
- id: ' 1' ,
21
- label: ' Node 1' ,
22
- position: { x: 0 , y: 0 },
23
- isValidSourcePos : (connection ) => {
24
- return connection .target === ' 2'
25
- },
26
- },
27
- ]
28
- ```
29
-
30
18
<div class =" mt-6 " >
31
19
<Repl example =" validation " ></Repl >
32
20
</div >
You can’t perform that action at this time.
0 commit comments