Getting the array length from an array in the vue data object

Question

I am having a bit of a problem getting an array length in vue. The array is in the data object as

data() {
    return {
      slides: [
        {
          image: require("@/assets/img/carousel/couple.jpg"),
          caption:
            "A couple wearing masks kiss in a shopping area in downtown Shanghai, China, on February 16, 2020."
        },
        {
          image: require("@/assets/img/carousel/dogs.jpg"),
          caption:
            "Dogs wearing masks are seen in a shopping area in downtown Shanghai on February 16, 2020."
        },
         etc... ]

and then in methods

methods: {
    playSlides() {
      this.imgSource = this.slides[this.currentSlide].image;
      this.figCaption = this.slides[this.currentSlide].caption;
      let slideInterval = setInterval(nextSlide, 2000);

      function nextSlide() {
        console.log(`slides.length is: ${this.slides.length}`);
        this.currentSlide = (this.currentSlide + 1) % this.slides.length; // % is same as mod operator
        console.log(Array.isArray(this.slides));
      }
    }
  }
};

I know its been a long day but this.slides.length is undefined?? and Array.isArray(this.slides) is false. Any body see what is the problem most appreciated...

You probably got undefined because you declared the variable nextSlide below where you used it. — Sølve
– Sølve, Commented Apr 4, 2020 at 0:53

Sølve · Accepted Answer · 2020-04-04 01:13:36Z

1

When you use function name(), the this context is not the this context of the parent object, it is in fact the this context of window.

In order to make this equal to the vue instance, you have to use an arrow function, or use the .bind prototype to explicitly bind what you want this to be in your function.

new Vue({
  data() {
    return {
      currentSlide: 1,
      slides: [{
          image: "@/assets/img/carousel/couple.jpg",
          caption: "A couple wearing masks kiss in a shopping area in downtown Shanghai, China, on February 16, 2020."
        },
        {
          image: "@/assets/img/carousel/dogs.jpg",
          caption: "Dogs wearing masks are seen in a shopping area in downtown Shanghai on February 16, 2020."
        }
      ]
    };
  },

  created() {
    this.playSlides();
    this.playSlides2();
  },

  methods: {
    playSlides() {
      this.imgSource = this.slides[this.currentSlide].image;
      this.figCaption = this.slides[this.currentSlide].caption;
      let slideInterval = setInterval(nextSlide.bind(this), 2000);

      function nextSlide() {
        console.log(`slides.length is: ${this.slides.length}`);
        this.currentSlide = (this.currentSlide + 1) % this.slides.length; // % is same as mod operator
        console.log(Array.isArray(this.slides));
      }
    },

    playSlides2() {
      this.imgSource = this.slides[this.currentSlide].image;
      this.figCaption = this.slides[this.currentSlide].caption;

      const nextSlide = () => {
        console.log(`slides.length is: ${this.slides.length}`);
        this.currentSlide = (this.currentSlide + 1) % this.slides.length; // % is same as mod operator
        console.log(Array.isArray(this.slides));
      }

      let slideInterval = setInterval(nextSlide, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

edited Apr 4, 2020 at 1:13

answered Apr 4, 2020 at 0:47

Sølve

4,5162 gold badges23 silver badges35 bronze badges

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

2 Comments

Alan Over a year ago

Mucho appreciado. I changed this line to let slideInterval = setInterval(nextSlide.bind(this), 2000); and now all is working. Everyone stay safe.

Sølve Over a year ago

Oh yes! my bad. Edited the answer. I was running the function directly to debug, and I forgot that setinterval is taking a function as callback. Good spot!

Collectives™ on Stack Overflow

Getting the array length from an array in the vue data object

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