How to limit the output of a list in vuejs, for example 5th or 10th and so on?

Question

Vue.js

There is a design, it displays a preview of the user's avatars:

<div class="conteaner-drop">
  <router-link :to="`/drop${ user.drop }`" class="drop-preview" v-for="user in randomList" :key="user">
    <img :src="require(`@/assets/images/dropuser/drop${ user.drop }/${ user.avatar }.jpg`)" />
    <div class="pfilter"></div>
    <span :class="user.status"></span>
     <p>{{ user.name }}</p>
   </router-link>
</div>

computed: {
  randomList: function(){
    return this.users.sort(function(){return 0.5 - Math.random()});
  }
}

In this option, all users that are in the array are displayed. (did not show the date with the array) How to limit the list? I poked around in the documentation, but all the list output restrictions are displayed in the example, through v-for, but here it is already there. How to be?

Answer 1

computed: {
  randomList: function(){
    return this.shortList.sort(function(){return 0.5 - Math.random()});
  },

  shortList: function() {
    return this.users.slice(0, 5)
  }
}