<template>
    <div class="slider" ref="stepper">
        <div>
            <a href="#" @click.prevent="step++">weiter</a>
        </div>
        <div>
            aaaa
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            innerStep: 0,
            slideCount: 2,
        };
    },
    computed: {
        step: {
            set(index) {
                var _self = this;
                this.innerStep = index;

                this.$nextTick(function() {
                    _self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index;
                });
            },
            get() {
                return this.innerStep;
            }
        },
    },
    methods: {
        slideTo(e, index) {
            if (e !== null) {
                e.preventDefault();
            }

            var _self = this;
            this.step = index;

            if (index === 0) {
                window.setTimeout(function() {
                    _self.value.kind = null;
                }, 500);
            }

            jQuery('html, body').stop().animate({
                'scrollTop': jQuery('#stepper-main').offset().top
            }, 600, 'swing');

            this.$nextTick(function() {
                _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
            });
        }
    }
};
</script>
