limited number of dynamic generated images by using vue

I wanted to make a div of random positioned icons and this is what i made so far. Can we make this to generate only limited number of images like 20 images and not unlimited.

If you have better way to make something like this, then i would be really thankful.

Thanks

let nextId = 20

new Vue({
  el: '#app',
  data() {
    return {
      images: [
        '//placekitten.com/200/200',
        '//placekitten.com/200/201',
        '//placekitten.com/200/202',
        '//placekitten.com/200/203',
        '//placekitten.com/200/204',
      ],
      addedImage: [],
      imgTop: -100,
      imgLeft: -100,
      imgHeight: 64,
      imgWidth: 64,
      changeInterval: 10,
      selectedImage: ''
    }
  },
  created() {
    this.randomImage();
    const randomImg = func => setInterval(func, this.changeInterval);
    randomImg(this.randomImage);
    randomImg(this.addImage);
    randomImg(this.randomPosition);
  },
  methods: {
    randomImage() {
      const idx = Math.floor(Math.random() * this.images.length);
      this.selectedImage = this.images[idx];
    },
    randomPosition() {
      const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
      this.imgTop = randomPos(window.innerHeight - this.imgHeight);
      this.imgLeft = randomPos(window.innerWidth - this.imgWidth);
    },
    addImage(){
      this.addedImage.push({
        style: {
          top: `${this.imgTop}px`,
          left: `${this.imgLeft}px`,
          height: `${this.imgHeight}px`,
          width: `${this.imgWidth}px`
        },
        src: this.selectedImage,
        id: nextId++
        
      });
    },
  }
})

.image {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :style="image.style" class="image" :key="image.id" :src="image.src" v-for="image in addedImage">
</div>

Answer

Introduce variables for the total, the current count, and the interval reference:

limit: 20,
counter: 0,
interval: null

Combine the three calls to setInterval into one and store the interval.

created() {
  this.interval = setInterval(() => {
    this.randomImage();
    this.randomPosition();
    this.addImage();
    this.counter++;
    if (this.counter === this.limit) {
      clearInterval(this.interval);
    }
  }, this.changeInterval);
},

Each call increases the counter and when the limit is reached, the interval is cleared. Here’s a demo:

let nextId = 20

new Vue({
  el: '#app',
  data() {
    return {
      images: [
        '//placekitten.com/200/200',
        '//placekitten.com/200/201',
        '//placekitten.com/200/202',
        '//placekitten.com/200/203',
        '//placekitten.com/200/204',
      ],
      addedImage: [],
      imgTop: -100,
      imgLeft: -100,
      imgHeight: 64,
      imgWidth: 64,
      changeInterval: 10,
      selectedImage: '',
      limit: 20,
      counter: 0,
      interval: null
    }
  },
  created() {
    this.interval = setInterval(() => {
      this.randomImage();
      this.randomPosition();
      this.addImage();
      this.counter++;
      if (this.counter === this.limit) {
        clearInterval(this.interval);
      }
    }, this.changeInterval);
  },
  methods: {
    randomImage() {
      const idx = Math.floor(Math.random() * this.images.length);
      this.selectedImage = this.images[idx];
    },
    randomPosition() {
      const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
      this.imgTop = randomPos(window.innerHeight - this.imgHeight);
      this.imgLeft = randomPos(window.innerWidth - this.imgWidth);
    },
    addImage(){
      this.addedImage.push({
        style: {
          top: `${this.imgTop}px`,
          left: `${this.imgLeft}px`,
          height: `${this.imgHeight}px`,
          width: `${this.imgWidth}px`
        },
        src: this.selectedImage,
        id: nextId++
      });
    },
  }
})

.image {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :style="image.style" class="image" :key="image.id" :src="image.src" v-for="image in addedImage">
</div>