Binding does not work in my code

[FTamas77]

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]

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

[FTamas77]

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