How to render v-for from particular index

Question

I want to loop in v-for from suppose from number 5 to 10 . The loop want to be started at 5 and end at 10.

I have tried this

<div v-for="n in 10" v-if="n>=5"></div>

But I want more effective way of doing the loop . Does anyone knows how to do so that loop starts at 5 ?

Answer 1

Its possible for your example:

<div v-for="i in range(5, 10)">
... some code here
</div>

and mount range function:

var app = new Vue({
  el: '#app',
  methods:{
    range : function (start, end) {
      return Array(end - start + 1).fill().map((_, idx) => start + idx)
   }
  }
});

and sample in jsfidle.

If want know more than this github issue can help you.

Answer 2

Also try this simple approach:

new Vue({
  el: '#test',
  data: {
    items: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10'
    ]
  },
  methods: {
    sliceItems: function (start, end) {
      return this.items.slice(start, end);
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="test">
  <ul>
    <li v-for="(item, index) in sliceItems(5,10)" >{{ item }}</li>
  </ul>
</div>