关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)

关于“关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)”这个问题，我们可以有多种解决方案，以下是其中一个完整的攻略。

问题描述

我们需要在vue的模板中使用v-for指令遍历数组并生成四列的商品展示列表。而且在每个列表的最右边，我们需要显示一个计算属性的值。如下图所示：

商品1 商品2 商品3 商品4 计算属性1
商品5 商品6 商品7 商品8 计算属性2
商品9 商品10 商品11 商品12 计算属性3
...

解决方案

第一步：编写模板

首先，我们需要在模板中使用v-for指令遍历数据，同时，我们可以使用样式控制每行中每个商品展示区域的宽度和间距：

<div class="product-list">
  <div v-for="(product, index) in products" :key="index" class="product-item">
    <div class="product-info"></div>
  </div>
</div>

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: calc(25% - 10px);
  margin-right: 20px;
  margin-bottom: 20px;
}

第二步：计算属性

我们需要定义一个计算属性，用于实现一行显示四个商品的需求：

computed: {
  productsChunks() {
    const chunks = [];
    for (let i = 0; i < this.products.length; i += 4) {
      chunks.push(this.products.slice(i, i + 4));
    }
    return chunks;
  },
}

这个计算属性将我们的整个商品数组拆分成一个二维数组，每个二维数组表示一行四个商品。而在这个计算属性中，我们使用了一个循环，每四个为一组，将其切割成了二维数组。

第三步：渲染

现在我们已经将商品列表拆分成了若干行，并且每一行有固定的四个商品。我们可以开始在模板上渲染数据。

<div class="product-list">
  <div v-for="(row, rowIndex) in productsChunks" :key="rowIndex" class="product-row">
    <div v-for="(product, columnIndex) in row" :key="columnIndex" class="product-item">
      <div class="product-info"></div>
    </div>
    <div class="product-calc">{{ calc(rowIndex) }}</div>
  </div>
</div>

在渲染模板时，我们需要遍历之前计算属性得到的二维数组，将每一行的四个商品展示区域渲染出来。而在每行的最右边，我们需要渲染一个计算属性的值。

第四步：编写计算方法

最后，我们需要在vue实例中编写一个计算方法calc用于计算每一行的最右边那个商品展示区域中的计算属性值：

methods: {
  calc(rowIndex) {
    let sum = 0;
    const row = this.productsChunks[rowIndex];
    for (let i = 0; i < row.length; i++) {
      const product = row[i];
      sum += product.price * product.count;
    }
    return sum;
  },
}

这个方法会接收一个行数作为参数，然后我们将其对应的productsChunks中的二维数组取出，再对每个商品的价格和数量求和计算出这一行的计算属性值。

示例说明

以下是一个使用示例，我们有一个商品列表的数据如下：

data() {
  return {
    products: [
      {name: '商品1', price: 10, count: 2},
      {name: '商品2', price: 20, count: 1},
      {name: '商品3', price: 30, count: 3},
      {name: '商品4', price: 40, count: 2},
      {name: '商品5', price: 10, count: 1},
      {name: '商品6', price: 20, count: 3},
      {name: '商品7', price: 30, count: 2},
      {name: '商品8', price: 40, count: 1},
      {name: '商品9', price: 10, count: 3},
      {name: '商品10', price: 20, count: 2},
      {name: '商品11', price: 30, count: 1},
      {name: '商品12', price: 40, count: 3},
    ],
  };
},

在模板中，我们使用之前的解决方案，展示出一行显示四个商品，并在每一行的最右边，显示这一行的计算属性值：

<div class="product-list">
  <div v-for="(row, rowIndex) in productsChunks" :key="rowIndex" class="product-row">
    <div v-for="(product, columnIndex) in row" :key="columnIndex" class="product-item">
      <div class="product-info">
        <div>{{ product.name }}</div>
        <div>{{ product.price }}元</div>
        <div>{{ product.count }}个</div>
      </div>
    </div>
    <div class="product-calc">{{ calc(rowIndex) }}元</div>
  </div>
</div>

最终，我们得到了一个可以一行显示四个商品，并且在每一行最右侧展示计算属性值的商品列表。