update(examples): Use vmodel for custom node

* use v-model for save & restore example Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
2021-11-19 13:47:09 +01:00
parent 054e71a609
commit f99dca1c11
4 changed files with 10 additions and 18 deletions
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { VueFlow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements, removeElements } from '~/index'

 import './save.css'

@@ -11,16 +11,13 @@ const initialElements: Elements = [
 ]

 const elements = ref(initialElements)
-const flowInstance = ref()

 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
 const onRestore = (els: Elements) => (elements.value = els)
-const onAdd = (el: Node) => (elements.value = elements.value.concat(el))
 </script>
 <template>
-  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
-    <Controls :flow-instance="flowInstance" @restore="onRestore" @add="onAdd" />
+  <VueFlow v-model="elements" storage-key="vue-flow-123" @elements-remove="onElementsRemove" @connect="onConnect">
+    <Controls @restore="onRestore" />
  </VueFlow>
 </template>