How to import Vue2vis library?

Asked

Viewed 146 times

0

I was trying to create a Timeline using Vis.js, using Vuejs 2 Adapter for Visjs,(https://github.com/alexcode/vue2vis) and the following error occurred :Cannot_read_the_property_'TimeLine' of undefined.

It must be an import error.If anyone can help, follow the code:

import vue2vis from 'vue2vis';
import Vue from 'vue'
Vue.component('timeline', vue2vis.Timeline);
const ItemComponent = Vue.extend({
    template: '<p>{{item.content}}</p>',
    props: ['item'],
});
export default {
    data(){
        return {
            groups: [{
                id: 0,
                content: 'Group 1'
            }],
            items: [{
                id: 0,
                group: 0,
                start: new Date(),
                content: 'Item 1'
            }],
            options: {
                editable: true,
                template: (item) => {
                    return new ItemComponent({
                        store: this.$store,
                        parent: this,
                        propsData: {
                            item,
                        },
                    }).$mount().$el;
                }
            }
        }
    },
}  
<div id="visualization" ref="myDiv">
    <timeline ref="timeline" :items="items" :groups="groups" :options="options">
    </div>
</div>

From now on I thank you for your help!

  • Have you tried closing the <Timeline> component tag? or importing Vue before vue2vis ?

1 answer

0

I’m new to using vue2vis, but with version 0.0.15 I didn’t need to import vue or vue2vis:

<script>
import { Timeline } from 'vue2vis';

export default {
    ...
}
</script>

See the full example here.

If you have an error with vue2vis.css, use

@import '~vue2vis/dist/vue2vis.css'

in place of

@import 'vue2vis/dist/vue2vis.css'`

Browser other questions tagged

You are not signed in. Login or sign up in order to post.