Vue3 - Cannot read property '_c' of undefined #67

Activity

1. alexcode

   added

   enhancement

   needs reproReproduction steps neededReproduction steps needed

   on Nov 9, 2020
2. erlebach commented on Jun 30, 2021

   

   erlebach

   on Jun 30, 2021

   More actions

   I have tried to create a Vue-3 container for vis-network. I got issues related to strict mode. Some how all vis functions ended up with problems in their argument TS. Here is a snapshot.

   
3. shambu2k commented on Aug 25, 2021

   

   shambu2k

   on Aug 25, 2021

   More actions

   Here is a codesandbox link which reproduces this issue with graph2d. Note that vue version in the sandbox is 3.2.6.
   Please take a look @alexcode
4. webmalex commented on Jan 6, 2022

   

   webmalex

   on Jan 6, 2022

   More actions

   example for vue 3:

   <template>
     <q-inner-loading :showing="loading">
       <q-spinner-ball size="50px" color="primary"/>
     </q-inner-loading>
     <div ref="root"/>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   import { Network } from 'vis-network';
   import API from 'src/services/api';
   
   export default defineComponent({
     name: 'vis',
     data(): {
       vis: Network | null,
       loading: boolean
     } {
       return {
         loading: false,
         vis: null,
       };
     },
     async mounted() {
       try {
         this.loading = true;
         var data: any = await API.core.vis(this.$route.query);
       } catch (error) {
         const message = 'Error vis';
         this.$q.notify({ type: 'negative', message: message });
         console.log(message, error, data);
       } finally {
         this.loading = false;
       }
       if (data != undefined) {
         const el : HTMLElement | any = this.$refs.root;
         this.vis = new Network(el, data['graph'], {});
         this.vis.once('afterDrawing', () => {
           el.style.height = '100vh'
         });
       };
     },
     beforeUnmount() {
       this.vis?.destroy();
     }
   });
   </script>
   
5. webmalex commented on Jan 6, 2022

   

   webmalex

   on Jan 6, 2022

   Last edited by webmalex

   More actions

   minimum for typescript and vue 3:

   <template>
     <div ref="root"/>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   import { Network } from 'vis-network';
   
   export default defineComponent({
     name: 'vis',
     data(): {
       vis: Network | null,
     } {
       return {
         vis: null,
       };
     },
     mounted() {
         const el : HTMLElement | any = this.$refs.root;
         this.vis = new Network(el, {nodes: ...}, {});
         this.vis.once('afterDrawing', () => {
           el.style.height = '100vh'
         });
       };
     },
     beforeUnmount() {
       this.vis?.destroy();
     }
   });
   </script>
   
6. alexcode commented on Sep 15, 2022

   

   alexcode

   on Sep 15, 2022

   Owner

   More actions

   Sorry for the very late reply. @shambu2k you are using the vue2 version of vue2vis. You must migrate to the new package of the repo by modifying the imports to:

   import { Graph2d } from "@vue2vis/graph2d";
   import "vis-timeline/styles/vis-timeline-graph2d.css";
   
7. alexcode

   removed

   enhancement

   on Sep 15, 2022