The image is changed only once at @click event with vuejs 2

Question

I'm using VueJS for this project, I'm having trouble changing the source of the img at the click of a button.

I have the img files in a local folder. Now they have a different id, so I should be able to change the id at every @click iteration.

This is the HTML code:

<div id="app">

    <div class="container" >
        <div class="slider-wrapper" tabindex="0">

            <div class="item">
                <img :src='allSlides[currentIndex].image' alt="Svezia" />
                <div class="text">
                    <h3>{{allSlides[currentIndex].title}}</h3>
                    <p>
                        {{allSlides[currentIndex].text}}
                    </p>
                </div>
            </div>

            <div class="thumbs">
                <div class="prev" @click="prev"></div>
                <div class="next" @click="next"></div>
                <div v-for="slide in allSlides" class="thumb">
                    <img :src="slide.image" :alt="slide.title"/>
                </div>
            </div>

        </div>
    </div>

</div>

<script src="js/script.js"></script>

This is the javascript code:

const slides = [
{
    image: 'img/01.jpg',
    title: 'Sweden',
    text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam, cumque provident totam omnis, magnam dolores dolorum corporis.',
},
{
    image: 'img/02.jpg',
    title: 'Switzerland',
    text: 'Lorem ipsum.',
},
{
    image: 'img/03.jpg',
    title: 'Britain',
    text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
},
{
    image: 'img/04.jpg',
    title: 'Germany',
    text: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam.',
},
{
    image: 'img/05.jpg',
    title: 'Paradise',
    text: 'Et temporibus voluptatum suscipit tempore aliquid deleniti aut veniam inventore eligendi ex ad ullam, cumque provident totam omnis.',
}

new Vue ({
el: "#app",
data: {
    allSlides: slides,
    state: "active",
    currentIndex: 0

},

methods: {
    prev() {
        this.allSlides[this.currentIndex].image;
        this.currentIndex++;

        if(this.currentIndex == this.allSlides.length){
            this.currentIndex = 0;
        }
    }
}

Basically, my final result should be a carousel that slides through the different locations, changing the image and information at every button interaction. Thank you all.

IMPORTANT, I HAVE TO USE VUE.JS 2

Answer 1

In the code that you wrote, this is not defined; Based on the current syntax, you should define a variable and assign your Vue instance to it, and use that variable instead of this. Here is the code:

cosnt vm = new Vue ({
el: "#app",
data: {
    current_slide: slides,
    all_slides: slides,
    state: "active",
    currentImg: 'img/01.jpg',
    newImgId: 1

},

methods: {
    prev() {
        
        if (vm.newImgId < 5) {
            vm.newImgId = vm.newImgId + 1
        } else {
            vm.newImgId = 1
        };
        vm.currentImg = `img/0${vm.newImgId}.jpg`;
        
    },
}

Also, note that since you are mentioning the next method in your HTML, you should define it, or at least comment it out, otherwise you would get an error.

Here is the related link.