Как ограничить вывод списка в vuejs, к примеру 5тью или 10тью и тд?

Question

[kroha3000]

Есть конструкция, она выводит превью аватарки пользователей:

<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()});
  }
}

В данном варианте выводятся все юзеры, которые есть в массиве. (дату с массивом показывать не стал) Как ограничить список? Ковырялся в документации, но все ограничения вывода списка, выводятся в примере, через v-for, а тут он уже имеется. Как быть?

Answer 1

[Alex]

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

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

Comments

[kroha3000]

Спасибо большое, временами изучаю js и vue. Очень помогли, всё работает!

[kroha3000]

А ещё такой вопрос, а если я захочу изменить значение длины списка? То уже с модемами работать надо будет да?

[Alex]

То уже с модемами работать надо будет да?

что?

[kroha3000]

К примеру если я реактивно хочу менять длину списка, то в каком направлении изучать дальше?

[Alex]

В data создаёте поле с длинной
В shortList ображаетесь к этому полю.

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

Далее Vue самостоятельно отследит все зависимости и при изменении arrCount пересчитает shortList а за ним пересчитает и randomList и перересует страницу

[kroha3000]

Спасибо огромное! Получилось всё!

То есть через this. мы можем к дате обращаться из любой функции которая находится в компутед, да?

[Alex]

kroha3000, Из любой не стрелочной функции. То есть во всех computed, methods и во всех хуках, кроме beforeCreated —потому что на данном этапе компонент ещё не создан

[kroha3000]

Спасибо! Стало более понятно!

[Alex]

kroha3000, И не только к data. this — это ваш компонент. Он содержит все свойства из data и computed и все методы.

[kroha3000]

Alex, здорово что так объяснили, в документации пока путаюсь, а так информация более понятна.

[Alex]

kroha3000, Полистайте примеры
https://ru.vuejs.org/v2/examples/

[kroha3000]

Там только редактор

[kroha3000]

а всё нашёл)

[kroha3000]

Отличная штука, некоторые вещи сразу видно как на примере реализовать. Обязательно всё посмотрю. Многие вопросы сразу отпадут) А я сижу туплю, сразу бы нашёл, и непонятных задач было бы меньше