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

我有两个嵌套的

v-for

元素，看起来像：

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

{{product.name}

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

---

如何获得第二个

v-for

元素内部的累积索引计数（相对于从类别索引父数组中显示的产品总数）？

如果我理解，它将是这样的

<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>

---

通过将产品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>

---

你是说每个类别五种产品还是所有类别五种产品？你能提供JSFIDLE吗？我将循环使用你的JS中的产品和类别，并构建一个新的数组来循环使用模板。在类别和产品循环中，可以为每个产品增加一个单独的计数，如果计数小于5，则将该产品添加到新阵列中。这样，您的逻辑都在JS中，并且您保持了模板的简单性。可能是一个计算属性，

slice（）

将您的产品放入一个包含5个产品的数组中。您可以用

拼接产品

属性替换

category.products.slice（0，nbProductToShow）

。

<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