Cannot read property 'dispatchEvent' of null

[ambarroto]

Hey @meandmax, i followed the instruction at this repo on how to implement it as an ES2015 module, but then this error acquired (Uncaught TypeError: Cannot read property 'dispatchEvent' of null). I implement the code like this in vue

import { lory } from 'lory.js'

export default {
    data() {
        return {

        }
    },
    mounted() {
        let slider = document.querySelector('.js_slider');

        lory(slider, {
            infinite: 1
        })
    },
}

Maybe you can give some help on how to fix this error. Sorry about my english

[ambarroto]

well, i've already fix this problem myself. I'm inspired by vue-lory in vue-admin-master first i create a lory component (lory.vue) like this

<template>
    <div class="slider js_slider">
        <div class="frame js_frame">
            <ul class="slides js_slides">
                <slot name="item"></slot>
            </ul>
        </div>
        <slot name="actions"></slot>
    </div>
</template>

and the script

<script>
import { lory } from 'lory.js'

export default {
    props: {
        options: {
            type: Object,
            default: () => ({
                enableMouseEvents: true,
            })
        }
    },

    data () {
        return {
            slider: null
        }
    },

    mounted () {
        this.slider = lory(this.$el, this.options)
    },

    beforeDestroy () {
        this.slider.destroy()
    }
}
</script>

also the css

<style lang="scss" scoped>
/**
* (optional) define here the style definitions which should be applied on the slider container
* e.g. width including further controls like arrows etc.
*/
.slider {

    .frame {
        /**
        * (optional) wrapper width, specifies width of the slider frame.
        */
        width: 100%;

        position: relative;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .slides {
        width: 100%;
        display: inline-block;
    }

    li {
        position: relative;
        display: inline-block;

        /**
        * (optional) if the content inside the slide element has a defined size.
        */
        width: 100%;

        position: relative;
        display: inline-block;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
    }

    .prev, .next {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        display: block;
        cursor: pointer;
    }

    .next {
        right: 0;
    }

    .prev {
        left: 0;
    }

    .next svg, .prev svg {
        width: 25px;
    }

    &.js_rewind {
        .frame li {
            margin-right: 10px;
        }
    }
}
</style>

then i call this lory in vue component that need lory like this

<lory>
    <li slot="item" v-for="image in post.file">
        <img :src="image" :alt="image">
    </li>
</lory>

. Well, it create the lory, but it's not slide the image by button. May it can give some help