[Vuejs]-Using v-for range on attributes in vue.js

by

4👍

✅

Instead of using the index (and bringing logic to your template), you could do this programatically.

Computed properties are perfect for these kind of tasks:

(Replace {{ image }} with your <img ..>)

var app = new Vue({
  el: '#app',
  data: {
    images: [1,2,3,4,5,6,7,8]
  },
  computed: {
    imagesSliced() {
      return this.images.slice(0,5);
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(image, index) in imagesSliced" :key="index">
    {{ image }}
    <!--  <img v-bind:src="image.ImageUrl" /> -->
    </li>
  </ul>
</div>
👤Bennett Dams

0👍

You need to index Images to get the image first, try Images[index].ImageUrl instead of image.ImageUrl[index] where image is not defined inside the first for loop:

<ul>
  <li v-for="index in 5" :key="index">
    <img v-bind:src="Images[index].ImageUrl" />
  </li>
</ul>
👤Psidom

Leave a comment