Как я могу нанести объект cytoscape внутри экземпляра данных Vue.js? - PullRequest
Новая
       16

Как я могу нанести объект cytoscape внутри экземпляра данных Vue.js?

0 голосов
/ 06 декабря 2018

Я пытаюсь использовать cytoscape.js в рамках vue.js.Я сделал простой шаблон, а в разделе data есть переменная cy.Функция подключения mounted(), которую я вызываю cytoscape.Все работает нормально, пока я храню результат cytoscape внутри локального varaible, вы можете увидеть ниже в mounted() function let cy = cytoscape({...}); Как только я попытаюсь сохранить cy varaible внутри переменной экземпляра 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>

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Какую версию 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>
0 голосов
/ 11 декабря 2018

Согласно этому источнику, вы должны вызвать 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>
...