如何在EventHandlers实例中管理v-网络图的Vue.js？

Question

这是问关于堆栈溢出的第一个问题！

我对Vue.js非常陌生，目前我正在尝试使用v-网络图组件显示节点网络图并与之交互。我很难使用EventHandler，因为我并没有真正掌握如何创建它和如何与它交互。我应该在另一个实例中启动它并将它直接导入到这个实例中吗？你能帮我理解如何管理事件处理程序吗？

我尝试了以下代码，希望它能在我单击的节点的id控制台中打印：

<script lang="ts">
import { reactive, ref } from 'vue';
import * as vNG from 'v-network-graph';
import {
  ForceLayout,
  ForceNodeDatum,
  ForceEdgeDatum,
} from 'v-network-graph/lib/force-layout';

const graph = ref<vNG.Instance>();
export default {
  data() {
    return {
      nodes: { '': { name: '' } },
      edges: { '': { source: '', target: '' } },
      layouts: {
        nodes: {
          node0: {
            x: 0,
            y: 0,
            fixed: true,
          },
        },
      },
      configs: reactive(
        vNG.defineConfigs({
          node: {
            selectable: true,
            label: {
              direction: 'center',
              color: '#eeeeee',
            },
            normal: {
              radius: 48,
            },
          },
          view: {
            autoPanAndZoomOnLoad: 'fit-content',
            minZoomLevel: 1,
            maxZoomLevel: 2,
            layoutHandler: new ForceLayout({
              positionFixedByDrag: false,
              positionFixedByClickWithAltKey: true,
            }),
          },
        }),
      ),
    };
  },
  methods: {
    async getNodes() {
      await fetch('http://127.0.0.1:5000/getNodes')
        .then((response) => response.json())
        .then((data) => { this.nodes = (data); });
    },
    async getEdges() {
      await fetch('http://127.0.0.1:5000/getEdges')
        .then((response) => response.json())
        .then((data) => { this.edges = (data); });
    },
  },
  beforeMount() {
    this.getNodes();
    this.getEdges();
    const eventHandlers: vNG.EventHandlers = {
      'node:click': ({ node }) => {
        window.console.log(this.nodes[node]);
      },
    };
  },
  mounted() {
    this.$refs.graph.fitToContents();
  },
};
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :configs="configs"
    :layouts="layouts"
    :event-handlers="eventHandlers"
    ref="graph"
    class="visualization"
  />
</template>

<style>
.visualization {
  width: 100%;
  height: 100vh;
  border: 1px solid #000;
}
</style>

Answer 1

多亏了这个职位，我已经明白了如何做到这一点。基本上，我正在学习的文档是使用脚本设置，而我使用的是OptionAPI！

实际答案是：

这里的诀窍是不要使用vNG.EventHandlers，直接在数据组件中设置事件处理对象，在图形元素中设置v-bind指令。

代码(请注意，我故意删除了上一篇文章中的无用代码，以便给出更清晰的答案)：

<script lang="ts">
import { reactive, ref } from 'vue';
import * as vNG from 'v-network-graph';

const graph = ref<vNG.Instance>();
export default {
  data() {
    return {
      nodes: reactive({ '': { name: '' } }),
      edges: { '': { source: '', target: '' } },
      click_event: {
        'node:click': ({ node }) => {
          window.console.log(this.nodes[node]);
        },
      },
    },
  },
};
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :event-handlers="click_event"
    ref="graph"
    class="visualization"
  />
</template>