Vue - Получить текущий индекс / счетчик массива на основе родительского массива V-For - PullRequest
Новая
       37

Vue - Получить текущий индекс / счетчик массива на основе родительского массива V-For

1 голос
/ 02 мая 2020

У меня есть два вложенных элемента v-for, которые выглядят следующим образом: 

<div class="category" v-for="(category, categoryIndex) in categories">
    <div class="product" v-for"(product, productIndex) in cateogry)">
        {{product.name}}
    </div>
</div>

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

Как получить совокупный индекс (по отношению к общему количеству продуктов, отображаемых из родительского массива categoryIndex ) во втором элементе v-for?

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Если я понял, это будет что-то вроде этого 

<div class="category" v-for="(category, categoryIndex) in categories">
    {{ category.name }}
    <div class="product" v-for="(product, productIndex) in category.products.slice(0, nbProductToShow)">
        {{(categoryIndex*nbProductToShow)+(productIndex+1)}}
        {{product.name}}
    </div>
</div>

Vue

new Vue({
    data : {
        nbProductToShow : 5,
        categories : [{
                id : 3445,
                name : 'shoes',
                products : [
                    { id: 23234, name : 'Pink unicorn shoes'}, 
                    // ...
                ]
            },{
                id : 3447,
                name : 'hat',
                products : [
                    { id: 232, name : 'Pink long hat with unicorn'}, 
                    // ...
                ]
            }
        ]
    }
})
0 голосов
/ 02 мая 2020

Вы можете проверить, находится ли продукт в первых пяти продуктах рендеринга, передав его идентификатор функции и показывая продукт в соответствии с его возвращенным значением. Вот пример: 

<template>
  <div>
    <div class="category" v-for="(category, categoryIndex) in categories" :key="categoryIndex">
      <div class="product" v-for="(product, productIndex) in category.products" :key="productIndex">
        <span v-if="incrementCount(product.id)">{{product.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          products: [
            { id: 1, name: "1" },
            { id: 2, name: "2" },
            { id: 3, name: "3" },
          ]
        },
        {
          products: [
            { id: 4, name: "4" },
            { id: 5, name: "5" },
            { id: 6, name: "6" },
          ]
        }
      ]
    };
  },
  methods: {
    incrementCount: function(id) {
      let count = 0;
      for(let i = 0; i < this.categories.length; i++)
        for(let j = 0; j < this.categories[i].products.length; j++)
          if(count++ < 5 && this.categories[i].products[j].id===id)
            return true;
      return false;
    }
  },
};
</script>

Соответственно, результат будет: 

1
2
3
4
5
...