So I am working with v-network-graphs to create graphs in the front end using Vue. I have defined my data as
data(){
return{
test: test_data,
nodes:{},
edges:{},
nextNodeIndex: Number,
selectedNodes: ref<string[]>([]),
selectedEdges: ref<string[]>([])
}
}
and my methods are defined as
methods: {
g(){
this.nodes = reactive(this.test.nodes)
this.edges = reactive({ ...this.test.edges })
console.log(this.nodes)
console.log(this.edges)
this.nextNodeIndex = ref(Object.keys(this.nodes).length + 1)
},
addNode() {
const nodeId = this.nextNodeIndex.value
this.nodes[nodeId] = {
name: String(nodeId),
size: 16,
color: "blue",
label: true
}
this.nextNodeIndex.value++
console.log(this.nextNodeIndex)
},
removeNode() {
for (const nodeId of this.selectedNodes.value) {
delete this.nodes[nodeId] //Delete the selected node, by their ID
}
},
Now when I try to remove a node I am getting the error this.selectedNodes.value is not iterable , how should I define selectedNodes then?
https://dash14.github.io/v-network-graph/examples/operation.html#add-remove-network-elements
The above link has an example on how to write remove edge function using the library. I am doing the same, but I want to write the function inside a method as I am working in a Vue project. I am new to Javascript and Vue so any suggestions are greatly appreciated.
Your example is using OptionsAPI data function to create state which is reactive and the guide that you are referring to is using a Script setup that requires the use of ref() function to create reactive variables.
Because data returns object state that is already reactive, the use of ref within it is redundant and its properties will still be accessible via the . notation without the use of value.
So in your example, you should change the following:
for (const nodeId of this.selectedNodes.value) {
to
for (const nodeId of this.selectedNodes) {
And you can additionally replace the following two properties in data:
selectedNodes: ref<string[]>([]),
selectedEdges: ref<string[]>([])
to
selectedNodes: [],
selectedEdges: []
Hope this helps you!