Vue项目中v-network-graph数据绑定失效问题求助

问题背景 #

基于Vue3 + TypeScript + v-network-graph搭建项目，动态新增节点后，调试确认nodes对象已添加新节点，但页面仅渲染初始的2个节点，视图无更新。

核心代码与操作步骤 #

1. 初始数据定义（data.ts）

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

export const edges = [];

2. 页面模板（myPage.vue）

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

3. 动态添加节点的代码

for (const property in this.selected_parameters) {
  const create_node = {};
  create_node.name = this.selected_parameters[property].name;
  nodes[this.selected_parameters[property].name] = create_node;
}

已执行的排查动作 #

• 更新node.js和npm至最新版本
• tsconfig.json中配置"allowJs": true
• 项目依赖配置：

{
  "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"
  }
}

原因分析与解决方案 #

根本原因 #

导入的nodes是普通JavaScript对象，并非Vue的响应式状态。Vue3的响应式系统无法检测到普通对象的属性新增操作，因此不会触发视图更新。

解决方案 #

1. 将nodes转为组件内部的响应式状态
   在myPage.vue中，将导入的初始节点转为响应式对象：

<script setup lang="ts">
import { reactive } from 'vue';
import { nodes as initialNodes, edges } from './data.ts';

// 转为响应式对象
const nodes = reactive({ ...initialNodes });
</script>

2. 规范动态添加节点的操作
   修改添加节点的代码，确保操作响应式对象的方式符合Vue要求：

for (const property in this.selected_parameters) {
  const param = this.selected_parameters[property];
  // 补充完整节点属性，与初始节点结构保持一致
  nodes[param.name] = {
    name: param.name,
    edgeWidth: 1,
    hue: 180 // 可设置默认值或动态计算值
  };
}

额外注意事项 #

• 若使用ref包裹对象，需通过.value访问并修改：const nodes = ref({ ...initialNodes });，添加节点时写为nodes.value[param.name] = ...
• 动态添加的节点必须包含v-network-graph所需的核心属性，避免因属性缺失导致渲染异常

内容的提问来源于stack exchange，提问作者anon