TypeError: this.selectedNodes.value is not iterable

Question

所以我正在使用 v-network-graphs 在前端使用 Vue 创建图形。我将我的数据定义为

data(){
    return{
      test: test_data,
      nodes:{},
      edges:{},
      nextNodeIndex: Number,
      selectedNodes: ref<string[]>([]),
      selectedEdges: ref<string[]>([]) 
    }
  }

我的方法定义为

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
      }
    },

现在当我尝试删除一个节点时出现错误 this.selectedNodes.value is not iterable ，那么我应该如何定义 selectedNodes 呢？

https://dash14.github.io/v-network-graph/examples/operation.html#add-remove-network-elements

上面的link有一个关于如何使用库编写删除边缘函数的例子。我也在做同样的事情，但是我想在 Vue 项目中工作时在方法中编写函数。我是 Javascript 和 Vue 的新手，所以非常感谢任何建议。

Answer 1

您的示例使用 OptionsAPI data function to create state which is reactive and the guide that you are referring to is using a Script setup，需要使用 ref() 函数来创建反应变量。

因为 data returns 对象状态已经是反应性的，所以在其中使用 ref 是多余的，它的属性仍然可以通过 . 符号访问不使用 value.

因此在您的示例中，您应该更改以下内容：

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

到

for (const nodeId of this.selectedNodes) {

并且您可以另外替换 data 中的以下两个属性：

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

到

selectedNodes: [],
selectedEdges: []

希望对您有所帮助！

TypeError: this.selectedNodes.value is not iterable

TypeError: this.selectedNodes.value is not iterable

javascript

typescript

vue.js