Vue функция фильтра для возврата всегда еще 5 элементов

Question

на самом деле нет bigg ie но как будет выглядеть функция фильтра вычисляемых свойств, которая всегда возвращает текущий массив + еще 5 элементов?

подробнее:

Шаблон:

 <span class="box-content" v-for="item in activeItems" :key="item.id">
      <img class="item" :src="item.filename" />
    </span>

Скрипт

      data: function() {
    return {
      items: [],

      limit: 1,
    };
  },
  computed: {
activeItems: function() {
    return this.items.filter( function(s) {
        if(s.length > this.limit) {
            return s;
        }
    });
//   return this.limit ? this.items : this.items;
}
},

при загрузке страницы, пост-запрос топора ios получает объект элементов, чей ответ помещается в массив элементов, который становится пустым при объявлении компонента. поэтому ax ios -> получить объект с элементами -> pu sh в пустой массив. Теперь я хочу отобразить, например, 5 элементов и сделать кнопку «Показать больше».

Проблема в том, что моя функция activeItems недействительна, она не знает «this.limit», и я все равно сомневаюсь, что она возвращает правильный результат, так как я только что заставил его возвращать саму себя, а не набор объектов / массивов.

Что бы я сделал дальше, попытался бы обойтись со сращением и срезом, копированием массива и помещением в него элементов до тех пор, пока не будет выполнено определенное условие встретил но .. есть ли лучший способ? Заранее спасибо

Answer 1

Функция фильтрации должна использоваться для фильтрации на основе внутренних значений массива. Допустим, у вас есть массив объектов с persons и каждым Person как age, тогда вы можете использовать функцию Array.prototype.filter для фильтрации по возрасту каждой записи. Поэтому функция фильтра просматривает каждую запись в вашем массиве и определяет, следует ли включать или исключать элемент.

Если вы, с другой стороны, хотите ограничить количество записей на основе максимального количества записей Я бы предложил вам использовать Array.prototype.slice , как вы уже упоминали.

Ваша вычисленная функция может быть переписана в:

activeItems: function() {
    return this.items.slice(0, this.limit)
}

Answer 2

Конечно, вы можете сделать это. Вы просто пропустили какой-то код на нем. Вот как это исправить

activeItems: function() {
    let limit = this.limit
    return this.items.filter( function(item, s) {
        return s <= limit
    });
}

Если вы не возражаете против использования фильтра, вот несколько способов сделать это.

Первый : поставьте условие в вашем l oop, этот

<span class="box-content" v-for="(item, index) in items" :key="item.id" v-if="index <= limit">
      <img class="item" :src="item.filename" />
</span>

Второй предназначен для нарезки массива на желаемую длину, этот

<span class="box-content" v-for="(item, index) in items.slice(0, limit)" :key="item.id">
      <img class="item" :src="item.filename" />
</span>

Answer 3

Во-первых, в вашем коде this.limit не определено, потому что this ссылается на анонимную функцию. Если вы хотите получить доступ к компоненту, вам лучше использовать функции стрелок синтаксис. Кроме того, s ссылается на элемент вашего массива, так что s.length тоже будет неопределенным ...

Теперь, filter не кажется лучшим выбором для ваших нужд. Я go с slice вместо этого. Что-то вроде:

computed: {
  activeItems() {
    return this.items.splice(0, this.limit)
  }
}

Где limit увеличивается на 5 при нажатии кнопки Показать больше.