所以我正在使用 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 的新手，因此非常感謝任何建議。
uj5u.com熱心網友回復：
您的示例是使用OptionsAPI data函式來創建反應性狀態，而您所指的指南是使用需要使用函式來創建反應性變數的腳本設定。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: []
希望這對你有幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484194.html
標籤：javascript 打字稿 Vue.js