数据绑定在带有 v-network-graph 的 Vue 项目中不起作用

Question

我想问题的根本原因在于我的实现。我已经推送了我的代码，但主要部分是这些：

我创建了一个非常基本的 VueJS 项目。添加了打字稿包（v-network-graph）。创建了一个 data.ts 文件并将其放在那里（我使用 js 脚本，所以我认为添加一个单独的 ts 脚本是很好的）：

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

export const edges = [];

添加图形模板后（myPage.vue）

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

稍后我要补：

          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
          }

运行过程中节点会被扩展。您可以同时看到默认值和新值（前两个是硬编码的默认值）：

图片：

但是后来，我的屏幕上只有两个默认的。重新渲染丢失。 html部分被调用。

我对教程进行了最小的更改，并且没有看到进一步的错误消息。节点也添加在这里：

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

export default {
  data() {
    return {
      nodes,
....

我遵循了像this这样的教程。我还将node.js和npm更新到最新的，因为昨天我看到一条错误消息，然后它就消失了。

我在 tsconfig.json 中配置（包含的包是 typedscripted）：

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

Answer 1

我需要反应变量：

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

解决了我的问题。