如何在 v-for vue js 中创建增量变量

Posted 2023-03-14

【中文标题】如何在 v-for vue js 中创建增量变量

【英文标题】：How to make increment variable in v-for vue js

【发布时间】：2019-11-10 06:01:45

【问题描述】：

我想在 v-for 中创建一个增量变量

这是我在 vuejs 中的代码：

<tr v-for="(item,index) in vtype_all" :key="index" :set="incrementI = 0">
                <template v-for="item2 in data_tanggal1">
                    <td :key="item2.id" v-if="item2 == item.baseTanggal[incrementI].tanggal">item.baseTanggal[incrementI].hitc+'spasi'+incrementI</td>
                    <td :key="item2.id" v-if="item2 == item.baseTanggal[incrementI].tanggal">item.baseTanggal[incrementI].hith</td>
                    <td :key="item2.id" v-if="item2 != item.baseTanggal[incrementI].tanggal">0</td>
                    <td :key="item2.id" v-if="item2 != item.baseTanggal[incrementI].tanggal">0</td>
                    <template v-if="item2 == item.baseTanggal[incrementI].tanggal" :set="incrementI = incrementI+1"></template>
                </template>
                <td> item.jumQty </td>
                <td> item.jumHrg </td>
            </tr>

这就是我想要的（laravel 刀片）：

@foreach($dataProduct['byVtype'] as $row)
        <?php $i=0; ?> <!--can insert variable -->
        <tr>
            <td>$row['detail'][0]['vgrp_product']</td>
            <td>$row['detail'][0]['ptype']</td>
            <td>$row['detail'][0]['vgrp_nominal']</td>
            <?php for($j=0;$j<count($dataProduct['byTanggal']);$j++)  ?>
                <?php if(isset($row['baseTanggal'][$i]['tanggal']) ) ?>
                    @if($dataProduct['byTanggal'][$j] == $row['baseTanggal'][$i]['tanggal'])
                        <td>$row['baseTanggal'][$i]['hitc']</td>
                        <td>$row['baseTanggal'][$i]['hith']</td>
                        <?php $i++; ?> <!-- increment varible if condition true -->
                    @else
                        <td>0</td>
                        <td>0</td>
                    @endif
                <?php  ?>
            <?php  ?>
            <td> $row['jumQty'] </td>
            <td> $row['jumHrg'] </td>
        </tr>
    @endforeach

我已经设置了增量$i，但它仍然返回值 0，而不是增量值。

【问题讨论】：

你能展示整个组件吗？增量计数器从哪里来？

对不起，这是我的 incrementCounter incrementCounter: function (value) value += 1 return value ，我把方法放进去

为什么不直接使用索引呢？

因为完成循环后索引仍会增加。如果返回循环 vtype_all，我希望将值重置为 0

在你的第二个 v-for.. 中使用第二个增量器。<template v-for="(item2, i) in data_tanggal1">

【参考方案1】：

你为什么不直接使用索引值（从 0 开始），因为你只增加 1，就像这样？

  item.baseTanggal[index]
  item.baseTanggal[index+1]

等等... 您在这里不需要计算属性。索引就够了。

编辑：

然后试试这个：

<tr v-for="(item,index) in vtype_all" :key="index">
  <template v-for="item2 in data_tanggal1">
      <div v-for="counter in 10" :key="counter"> // change to to the number you want
        <td :key="item2.id" v-if="item2 == item.baseTanggal[counter].tanggal">item.baseTanggal[counter].hitc</td>
      </div>
  </template>
  <td> item.jumQty </td>
  <td> item.jumHrg </td>
</tr>

【讨论】：

如果返回循环 vtype_all，我希望将值重置为 0

感谢您的建议。我已经找到了新的方法，现在解决了^^