Vue-基于父V-For数组获取当前索引/数组计数

Question

我有两个嵌套的< code>v-for元素，看起来像:

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

我想只展示前五个产品，不考虑类别数量和每个类别的产品数量。

如何在第二个 v-for 元素内获取累积索引计数（相对于从 categoryIndex 父数组显示的产品总数）？

Answer 1

您可以通过将其 id 传递给函数并根据其返回值显示产品来检查产品是否在前五个产品呈现范围内。下面是一个示例：

<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

Answer 2

如果我理解的话，事情会是这样的

<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'}, 
                    // ...
                ]
            }
        ]
    }
})