<script lang='ts'>
import GraphWorld from '@/components/GraphWorld.vue'
// import { defineComponent } from "vue"
export default {
name: 'GraphView',
props: ['people', 'prac'],
components: {
GraphWorld
},
setup() {
const nodes={}
const edges={}
const n= 5
// var x = this.prac
for (let i = 1; i <= n; i++) {
nodes[`node${i}`] = {
name: `Node ${i}`
};
}
for (let i=1;i<=n-1;i++){
edges[`edge${i}`]={
source:`node${i}`,
target:`node${i+1}`
}
}
return { nodes, edges }
},
methods: {
}
}
I need assistance with using "prac" in the setup() function. The "prac" variable is a JSON object that I want to iterate through to generate nodes and edges dynamically. I attempted to access this.prac within setup(), but encountered an error. Moving the setup() logic into a method also brought about challenges. Any advice or alternatives would be greatly appreciated.
UPDATE: The revised approach below resolved my issue:
import { reactive, toRefs } from 'vue'
import GraphWorld from '@/components/GraphWorld.vue'
import { defineComponent } from "vue"
export default defineComponent ({
name: 'GraphView',
props: ['people', 'prac'],
components: {
GraphWorld
},
setup(props) {
const nodes={}
const edges={}
const { prac } = toRefs(props)
const n = reactive( prac.value )
// const n= prac.length
for (let i = 0; i < n.length; i++) {
nodes[`node${i}`] = {
name: `${n[i].Organizations}`
},
nodes[`node${i+n.length}`] = {
name: `${n[i].Title}`
};
}
for (let i=0;i<n.length;i++){
edges[`edge${i}`]={
source:`node${i}`,
target:`node${i+n.length}`
}
}
return { nodes, edges }
}