TypeError: this.selectedNodes.value is not iterable-CodePudding

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.

CodePudding user response：

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 the . notation without the use of value.

So in your example, you should change the following:

for (const nodeId of this.selectedNodes.value) {

for (const nodeId of this.selectedNodes) {

And you can additionally replace the following two properties in data:

selectedNodes: ref<string[]>([]),
selectedEdges: ref<string[]>([])

selectedNodes: [],
selectedEdges: []

Hope this helps you!