How to pass variable inside an array Vue

Question

How can I pass a variable from Images Array to access the display different image everytime I press the next button? I am new to vue js, I could use some help.

<template>
  <div class="background" :style="{backgroundImage: `url(${Images[number]})`}">
    <div v-on:click="next" class="nextButton"><p>&gt;</p></div>   
    </div>
  </div>
</template>

this is the array

data: () => ({
    Images:[ Image1, Image2, Image3],

this is my next script code

  methods:{
    next()
    { 
      var number = 0;

      if(number > 2){
        number == 0;
      }
      else{
        number ++;
      }
    },
  }

Amaarockz · Accepted Answer · 2021-07-05 03:38:33Z

2

The problem is everytime when you call the next method, you initialize the number to be zero. Please check the correct solution below

data: () => ({
    Images:[ Image1, Image2, Image3],
    number: 0, // Change added
    })

and the method would be like

methods:{
    next()
    { 
      if(this.number >= this.Images.length){ // Change added
        this.number = 0; // Change added
      }
      else{
        this.number += 1; // Change added
      }
    },
  }

answered Jul 5, 2021 at 3:38

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Over a year ago

thank you very much sir now I understand how it works.

Amaarockz Over a year ago

Great!! I'm glad that helped

Collectives™ on Stack Overflow

How to pass variable inside an array Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related