我想开始悬停幻灯片在vuejs一个图像

Question

我在index.html文件的主图像。在其下方，三个小缩略图都存在。主图像将根据在其上盘旋的图像发生变化。这是工作完全正常。现在，我想添加新的功能，其中第一悬停后，图像的变化后，自动1秒（测试目的）。

我试过是调用组件的updateMainImage方法setInterval函数。索引号是每个第二但不是图像之后，改变。以下是相关的代码片段。

Vue component:
    data(){
    return {
        imagenumber: 0,
        image:'images/ims.jpg',
        slideshowimages: [
            {
                id: 1,
                img: 'images/ims.jpg',
            },
            {
                id: 2,
                img: 'images/ims2.jpg',
            },
            {
                id: 3,
                img: 'images/ims3.jpg',
            }
        ]
    }
},

方法

updateMainImage(img,index){
        this.image = img
        console.log(index)
        var timer= setInterval(function(){
            if(index<2){
                index++
                console.log(index)
                this.image= slideshowimages[index].img
            }
            else{
                index=0
                console.log(index)
            }
        },1000)
    }

模板

<div class="wrapperThumbnailforMainImage">
        <div class="thumbnailForMainImage" v-for="(image, index) in 
         slideshowimages" :key="image.id">
        <img :src="image.img" 
         @mouseover="updateMainImage(image.img,index)">
        </div>
    </div>

我想要显示的各自索引号的图像。

Answer 1

请参阅更新的代码。

updateMainImage(img,index){
        this.image = img
        console.log(index)
        var timer= setInterval(function(){
            if(index<2){
                index++
                console.log(index)
                this.image= slideshowimages[index].img
            }
            else{
                index=0
                this.image= slideshowimages[index].img
                console.log(index)
            }
        },1000)
    }