saving custom data

[Randommist]

I'm a little confused. I need to make a node that will have a text input field. I also want this to work within the official "Save & Restore" example. I tried saving the entered text in props.data, but it didn't work. What would be the best way to implement this?

[bcakmakoglu]

You can't mutate props if that's what you're trying. That's a restriction set by Vue itself.

If you want to update the data of a node from inside the node, you could use a vModel of the data obj, something like this

const props = defineProps<NodeProps>();

const emits = defineEmits<{ (event: 'update:data', data: { inputText: string } })>();

const vModel = computed({
	get: () => props.data,
	set: data => emits('update:data', data)
})

<template #node-custom="{ data, ...props }">
	<CustomNode v-bind="props" v-model:data="data" />
</template>

[Randommist]

Another question arose, in my case I declare a custom node like this:

import UserActionNode from './UserActionNode.vue'

const nodeTypes = {
   userAction: markRaw(UserActionNode)
}

and create a node:

const { addNodes } = useVueFlow()

addNodes([
   {
     id: '1',
     position: { x: 300, y: 150 },
     label: 'Node 1',
     type: 'userAction',
     data: { message: 'my message to node' }
   }
])

Is it possible to implement this for such a case or do I need to use this approach?:

<template #node-custom="{ data, ...props }">
<CustomNode v-bind="props" v-model:data="data" />
</template>

[bcakmakoglu]

const emits = defineEmits<{ (event: 'update:data', data: { inputText: string } })>(); has a typo there's a ) at the end before the closing > - you need to remove the excessive )

For your second question, using template slots is generally recommended over usage of nodeTypes object.
If you wanna "v-model" your data obj, you'd need to use slots.

[Randommist]

I can't seem to use v-model for v-slot

[plugin:vite:vue] v-model cannot be used on v-for or v-slot scope variables because they are not writable.

/home/andrey/Desktop/nodes/src/components/FlowChart.vue:81:68

79 |        <VueFlow>
80 |          <template #node-userAction="{ data, selected }">
81 |            <UserActionNode v-bind:selected="selected" v-model:data="data"/>
   |                                                                      ^
82 |          </template>
``

[bcakmakoglu]

Strange errors, they don't appear in my IDE.

Well, there's another way that possibly even more simple.

Inside of your custom node, you can call useNode to get the current node obj from the state and then just mutate the data object however you like.

For example:

<!-- Inside of a custom node component, like UserActionNode.vue -->
<script lang="ts" setup>
const { node } = useNode()

function onChange() {
  node.data = {
    ...node.data,
    hello: 'world',
  }
}
</script>

<template>
	<div>{{ node.data.hello }}</div>
</template>

[Randommist]

thank you, it really looks easier. But if still use the first method, then this option worked for me:

<script>
. . .

function updateNodeData(node_id: string, newData: any) {
   console.log(newData)
   const node = findNode(node_id)
   if (typeof node !== 'undefined') {
     node.data = newData
   }
}
</script>

<template>
       <VueFlow>
         <template #node-userAction="{ id, data, selected }">
           <UserActionNode
             :id="id"
             v-bind:selected="selected"
             v-bind:data="data"
             @update:data="updateNodeData"
           />
         </template>
       </VueFlow>
</template>