I am currently utilizing v-network-graphs to generate graphs in the front end with Vue. I have set up my data like this:
data(){
return{
test: test_data,
nodes:{},
edges:{},
nextNodeIndex: Number,
selectedNodes: ref<string[]>([]),
selectedEdges: ref<string[]>([])
}
}
and here are my defined methods:
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
}
},
However, I encountered an error when attempting to remove a node which stated
this.selectedNodes.value is not iterableThe provided link includes an example of removing edge functions using the library. While I followed the same approach, I prefer to implement the function within a method as part of my Vue project. Being relatively new to Javascript and Vue, any advice or suggestions would be highly valued.