Binding does not work in my code

[Tamas]

My data file has only this:

export const nodes = {};

/*
// expected something like this:
1: { name: "wheel_speeds", edgeWidth: 1, hue: 200 },
2: { name: "velocities", edgeWidth: 1, hue: 160 },
*/

export const edges = [];

I did the data binding like this:

      <div>
        <v-network-graph class="graph" :nodes="nodes" :edges="edges" />
      </div>

And I want to add my nodes like this:

          for (const property in this.selected_parameters) {
            console.log(`${property}:
                            ${this.selected_parameters[property].name} and
                            ${this.selected_parameters[property].active}`);

            const create_node = {};
            create_node.name = this.selected_parameters[property].name;
            //this.selected_parameters[property].active;

            nodes[this.selected_parameters[property].name] = create_node
          }

This is the incoming data I want to convert:

And I store it corretly:

{
"name": "client",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.2",
"bootstrap": "^5.3.2",
"source-map-support": "^0.5.21",
"typescript": "^5.3.2",
"v-network-graph": "^0.9.13",
"vue": "^3.3.4",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.4.0",
"vite": "^4.4.11"
}
}

I've just started using javascript a couple of days ago, but I could find nothing that explain my issue.

EDIT:

I left some init values:

export const nodes = {1: { name: "wheel_speeds", edgeWidth: 1, hue: 200 },
2: { name: "velocities", edgeWidth: 1, hue: 160 },};

and added further nodes later:

I see only the nodes added in the initialization:

Maybe this one can be wrong:

<script>
import axios from 'axios';
import { nodes, edges, size, hues } from "./data";

export default {
  data() {
    return {
      nodes,
      edges,
      size,
      hues,
    };
  },

[dash14.ack]

Hi @FTamas77,
In Vue, only variables that are declared to be reactive values using ref , reactive, etc. can follow the changes.
Please try this by declaring nodes and edges enclosed in a reactive function as shown below.

import { reactive } from "vue";
export const nodes = reactive({});
export const edges = reactive({});

See also the detailed code below.
https://dash14.github.io/v-network-graph/examples/operation.html#add-remove-network-elements

Best Regards

[Tamas]

Thanks. It works. I've not known about this feature.