Как вернуть только первые 5 записей во вложенном цикле Vue js

Question

Мне нужно перебрать shoppingItem (items) внутри shoppingOrder (orders). Есть три заказа. В первом заказе есть один элемент (itemid: 1), во втором заказе - шесть элементов (itemid: 2,3,4,5,6,7), в третьем заказе - один элемент (itemid: 8). Мне нужно показать только пять лучших предметов. т.е. 1,2,3,4,5, но текущий код ограничивает элемент только во втором порядке, показывая пять элементов внутри. Окончательный результат будет следующим: 1,2,3,4,5,6,8

Если в первом заказе пять элементов, должен выйти l oop, если в первом заказе один элемент, а во втором - шесть. , он должен показывать 1 в порядке 1 и 2,3,4,5 в порядке2 и завершать работу до заказа3. Но в моем примере использование order.shoppingItem.slice(0,5) ограничивает элементы только во втором порядке. Это не ограничивает общее количество предметов. Как мне решить эту проблему? Я использую Vue JS версию 2

NestedL oop. vue

<template>
  <div>
    <div v-for="order in shoppingOrder" :key="order.orderId">
      <div v-for="item in order.shoppingItem.slice(0,5)" :key="item.itemId">
        {{item.itemId}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NestedLoop",
  data() {
    return {
      shoppingOrder: [
        {
          orderId: 1,
          orderDate: "7/30/2020",
          orderStatus: "Dispatched",
          shoppingItem: [
            {
              itemId: 1,
              itemName: "Pen",
              itemQuantity: "1",
              itemPrice: "10.00"
            }
          ]
        },
        {
          orderId: 2,
          orderDate: "7/25/2020",
          orderStatus: "Ordered",
          shoppingItem: [
            {
              itemId: 2,
              itemName: "Notebook",
              itemQuantity: "2",
              itemPrice: "40.00"
            },
            {
              itemId: 3,
              itemName: "Scale",
              itemQuantity: "3",
              itemPrice: "100.00"
            },
            {
              itemId: 4,
              itemName: "Sharpener",
              itemQuantity: "1",
              itemPrice: "10.00"
            },
            {
              itemId: 5,
              itemName: "DocumentFolder",
              itemQuantity: "1",
              itemPrice: "10.00"
            },
            {
              itemId: 6,
              itemName: "PencilBox",
              itemQuantity: "5",
              itemPrice: "140.00"
            },
            {
              itemId: 7,
              itemName: "SketchBox",
              itemQuantity: "5",
              itemPrice: "10.00"
            }
          ]
        },
        {
          orderId: 3,
          orderDate: "7/34/2020",
          orderStatus: "Dispatched",
          shoppingItem: [
            {
              itemId: 8,
              itemName: "Sketch",
              itemQuantity: "1",
              itemPrice: "10.00"
            }
          ]
        }
      ]
    };
  },
  methods: {}
};
</script>

<style scoped>
</style>

Результат

1
2
3
4
5
6
8

Ожидается возврат только первых 5 таких элементов (1 в порядке 1, а затем 2,3,4,5 в порядке 2),

1
2
3
4
5

Answer 1

Я бы рекомендовал воспользоваться вычисляемыми свойствами Vue , чтобы сделать список ограниченным пятью элементами. В настоящее время ваш код только нарезает внутренний список на пять элементов.

computed: {
    topFive() {
      const limit = 5;
      let count = 0;
      let res = []
      for (let i = 0; i < this.shoppingOrder.length && count < limit; i += 1) {
        let order = this.shoppingOrder[i];
        for (let j = 0; j < order.shoppingItem.length && count < limit; j += 1) {
          let item = order.shoppingItem[j];
          res.push(item);
          count++;
        }
      }
      return res;
    }

Если у вас есть вычисленное свойство, вы можете вызвать его из шаблона следующим образом:

<div v-for="item in topFive" :key="item.itemId">{{item.itemId}}</div>

Answer 2

Мне нравится, насколько лаконичен ответ @Gaetan C, но .flat - относительно новый метод, который потребует поли-заполнения для браузеров, если вы используете Vue -cli 3. См. Этот Github выпуск подробнее. Если вы столкнетесь с какими-либо проблемами, вам, возможно, придется вручную отредактировать параметр poly-fill предустановки babel.

Для большей совместимости с другими браузерами или если вы используете vue cli 2 или ниже, я представляю это решение.

computed: {
  firstFiveShoppingItems: {
     let initialShippingItem = [];
     for (const order of this.shoppingOrder) {
   
       if (initialShippingItem.length + order.shoppingItem.length >=5) {
         return [...initialShippingItem, ...order.shoppingItem].slice(0, 5);
       }

       initialShippingItem = [...initialShippingItem, ...order.shoppingItem]
     }
     return initialShippingItem;
  }
}

Затем в свой шаблон вы добавляете

<div v-for="item in firstFiveShoppingItems" :key="item.itemId">
  {{item.itemId}}
</div>

Как я уже сказал, он не такой элегантный или лаконичный, как ответ @Gaetan C, но он будет более совместим с другими браузерами, и вам не нужно go через головную боль с конфигурациями поли-заливки.

Еще одна вещь, которая мне нравится в моем решении, это то, что оно не выполняет итерацию по всем массивам товаров, таких как ответ @Gaetan C. Ломается при получении результата.

Answer 3

Просто используйте вычисляемое свойство, чтобы получить 5 первых товаров:

computed: {
  firstShoppingItems: {
    return this.shoppingOrder.map(x => x.shoppingItem).flat().slice(0, 5);
  }
}

Тогда вам просто понадобится один v-for l oop:

<div v-for="item in firstShoppingItems" :key="item.itemId">
  {{item.itemId}}
</div>