未捕获的类型错误:无法读取 undefined

时间:2021-05-05 14:48:08

标签: laravel vuejs3

<div class="carousel">
    <transition-group name="fade" tag="div">
        <div class="carousel" v-for="i in [currentIndex]" :key="i" @touchstart="touchStart()" @touchend="touchEnd()">
            <img :src="currentImg" />
            <button class="btn"> <i class="fas fa-plus"></i> EXPLORE</button>
            <!--<span class="title">{{images[currentIndex].title}}</span>-->
        </div>
    </transition-group>  
</div>

在我的脚本 touchStart 方法和 Touchend 方法中抛出这个错误

methods: {

        startSlide: function() {
            this.timer = setInterval(this.next, 4000);
        },
        jump: function(index){
            clearInterval(this.timer);
            this.currentIndex = index;
            this.startSlide();
        },
        next: function() {
            if(this.currentIndex == this.images.length-1)
            {
                this.currentIndex = 0;
            }
            else
            {
                this.currentIndex += 1;
            }
        },
        prev: function() {
            if(this.currentIndex == 0)
            {
                this.currentIndex = this.images.length-1;
            }
            else
            {
                this.currentIndex -= 1;
            }
        },
        touchStart(e){
                touch = e.changedTouches[0];
                this.touchinitial =  parseInt(touch.clientX);
                console.log(this.touchinitial);
                e.preventDefault();
        },
        touchEnd(e){
            touch = e.changedTouches[0];
            this.touchended =  parseInt(touch.clientX);
                console.log(this.touchended);

            if(this.touchinitial > this.touchended)
            {
                    this.next();
            }
            else
            {
                    this.prev();
            }
            e.preventDefault();
        }
    },
<块引用>

我试图实现的是当触摸开始 x 坐标小于触摸结束 x 坐标时向右滑动否则向左滑动

有关为什么我收到此错误以及如何解决的任何帮助

1 个答案:

答案 0 :(得分:2)

尝试删除事件侦听器上的括号。由于没有将参数传递给函数,因此会导致错误。

<div class="carousel" v-for="i in [currentIndex]" :key="i" @touchstart="touchStart" @touchend="touchEnd">