Question

我正在尝试在vue.js框架内使用cytoscape.js。我制作了一个简单的模板，并且在cy部分中有一个变量data。我称之为mounted()的{{1}}挂钩函数。只要我将cytoscape的结果存储在本地变量中，一切都可以正常工作，只要我尝试存储cytoscape变量，就可以在下面的mounted()函数let cy = cytoscape({...});中看到在cy实例变量（即data）内，整个浏览器崩溃。有任何想法吗？

this.cy = cy

Answer 1

您正在使用哪个版本的cytoscape.js？

我遇到了同样的问题，并通过显式使用3.2.22版解决了该问题。使用此版本，您的示例似乎可以正常工作

var app = new Vue({
        name: 'HelloWorld',
        el: '#app',
        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
        }
      })

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/cytoscape@3.2.22/dist/cytoscape.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <style>
    #cyto {
      width: 300px;
      height: 300px;
      display: block;
      background-color: grey
    }
  </style>
</head>

<body><div id="app">
   <div id="cyto" ref="cyto"></div>
  </div>
</body>

</html>

Answer 2

根据this源，您必须调用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>

如何在Vue.js数据实例内部播种cytoscape对象？

2 个答案: