Я хочу, чтобы начать слайд-шоу при наведении на изображение в vuejs

Question

У меня есть основное изображение в файле index.html.Под ним три небольших миниатюрных изображения.Основное изображение будет меняться в зависимости от изображения, на котором зависла.Это работает отлично.Теперь я хочу добавить новую функциональность, в которой после первого наведения изображение меняется автоматически через 1 секунду (для целей тестирования).

Я пытался вызвать функцию setInterval в методе updateMainImage компонента.Индекс меняется после каждой секунды, но не изображения.Вот соответствующие фрагменты кода.

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)
    }