如何在 Vue.js 数据实例中存储 cytoscape 对象？

Question

我正在尝试在 vue.js 框架中使用 cytoscape.js。cy我制作了一个简单的模板，并且在该部分中也有一个变量data。我调用的in mounted()hook 函数cytoscape。只要我将结果存储cytoscape在本地变量中，一切都会正常，您可以在mounted()函数中看到下面let cy = cytoscape({...});一旦我尝试将cy变量存储在data实例变量中，即this.cy = cy整个浏览器崩溃。有任何想法吗？

 <template>
  <div id="cyto" ref="cyto"></div>
</template>
<script>
import cytoscape from "cytoscape";

export default {
  name: "HelloWorld",
  data: function() {
    return {
      cy: null
    };
  },
  props: {
    msg: String
  },
  mounted() {
    let cy = cytoscape({
      container: this.$refs.cyto,
      elements: [
        // list of graph elements to start with
        {
          // node a
          data: { id: "a" }
        },
        {
          // node b
          data: { id: "b" }
        },
        {
          // edge ab
          data: { id: "ab", source: "a", target: "b" }
        }
      ],

      style: [
        // the stylesheet for the graph
        {
          selector: "node",
          style: {
            "background-color": "#666",
            label: "data(id)"
          }
        },

        {
          selector: "edge",
          style: {
            width: 3,
            "line-color": "#ccc",
            "target-arrow-color": "#ccc",
            "target-arrow-shape": "triangle"
          }
        }
      ],

      layout: {
        name: "grid",
        rows: 1
      }
    });
    //this line below breaks the browser
    this.cy = cy;

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cyto {
  height: 100%;
  display: block;
  border: 1px solid blue;
}
</style>

Answer 1

根据此来源，您必须调用 renderView 才能初始化视图：

// index.js
import Cytoscape from './Cytoscape.vue';
export default Cytoscape;

/* cssFile.css */
#cyto {
  height: 100%;
  display: block;
  border: 1px solid blue;
}

<!-- AppVue.js -->
<template>
  <div class="cytoscape"></div>
</template>
<style>

</style>
<script>
  import cytoscape from 'cytoscape';
  export default {
    name: "HelloWorld",
    data: function() {
      return {
        cy: null
      };
    },
    props: {
      msg: String
    },
    methods: {
      renderView: function(newElements) {
        // the only reliable way to do this is to recreate the view
        let cy = cytoscape({
          container: this.$refs.cyto,
          elements: [
            // list of graph elements to start with
            {
              // node a
              data: {
                id: "a"
              }
            },
            {
              // node b
              data: {
                id: "b"
              }
            },
            {
              // edge ab
              data: {
                id: "ab",
                source: "a",
                target: "b"
              }
            }
          ],

          style: [
            // the stylesheet for the graph
            {
              selector: "node",
              style: {
                "background-color": "#666",
                label: "data(id)"
              }
            },

            {
              selector: "edge",
              style: {
                width: 3,
                "line-color": "#ccc",
                "target-arrow-color": "#ccc",
                "target-arrow-shape": "triangle"
              }
            }
          ],

          layout: {
            name: "grid",
            rows: 1
          }
        });
      }
    },
    mounted: function() {
      this.$emit('created', this);
    }
  }
</script>