Question

我正在尝试在vuejs + webpack中建立一个简单的gojs图。我使用npm安装了gojs，并将其导入了main.js文件中的项目：import go from 'gojs' 现在我的问题是如何使事情在组件实现中起作用，那就是组件Diagram.vue的代码：

<template>
   <div id="myDiagramDiv" style="width:300px; height:300px;"></div>
</template>

<script>
   export default {
      name: 'Diagram', 
      data: function () {
         return {
            nodeDataArray: [
               {key:1, text:"Alpha"},
               {key:2, text:"Beta"}
            ],
            linkDataArray: [
               {from:1, to:2}
            ]
         }
      },
      methods: {
         getUnits: function(){
            var $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "myDiagramDiv");
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
         }
      },
      mounted: function(){
         this.getUnits();
      }
}
</script>

它编译时没有错误，但我只能看到一个白色的空白框...

Answer 1

您尚未初始化图。通常通过调用go.GraphObject.make(go.Diagram, theHTMLDivElement, { . . . options . . .})

在https://gojs.net/latest/samples/vue.html的Vue.js框架中有一个完整而简单的示例。

Answer 2

现在我的问题是如何使事情在组件实现中起作用

gojs-projects github中有一个正式的（由GoJS团队制作）VueJS + Webpack + GoJS项目，您可以使用它作为示例：https://github.com/NorthwoodsSoftware/GoJS-projects

带有vuejs和webpack的gojs

2 个答案: