TypeError: this.selectedNodes.value不可迭代

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

上面的链接有一个如何使用库编写移除边缘函数的示例。我也在做同样的事情，但我想把函数写在一个方法里，因为我在一个Vue项目中工作。我是Javascript和Vue的新手，所以任何建议都非常感谢。

Answer 1

你的例子是使用OptionsAPIdata函数来创建状态，这是反应性的，你所指的指南是使用脚本设置，需要使用ref()函数来创建反应性变量。

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

所以在你的例子中，你应该改变以下内容:

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

for (const nodeId of this.selectedNodes) {

您还可以替换data中的以下两个属性:

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

selectedNodes: [],
selectedEdges: []

希望这对你有帮助!