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

时间:2019-06-28 09:17:21

标签: javascript laravel vue.js laravel-blade

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

这是我在vuejs中的代码

<tr v-for="(item,index) in vtype_all" :key="index" :set="increamentI = 0">
                <template v-for="item2 in data_tanggal1">
                    <td :key="item2.id" v-if="item2 == item.baseTanggal[increamentI].tanggal">{{item.baseTanggal[increamentI].hitc+'spasi'+increamentI}}</td>
                    <td :key="item2.id" v-if="item2 == item.baseTanggal[increamentI].tanggal">{{item.baseTanggal[increamentI].hith}}</td>
                    <td :key="item2.id" v-if="item2 != item.baseTanggal[increamentI].tanggal">0</td>
                    <td :key="item2.id" v-if="item2 != item.baseTanggal[increamentI].tanggal">0</td>
                    <template v-if="item2 == item.baseTanggal[increamentI].tanggal" :set="increamentI = increamentI+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,而不是增量值。

2 个答案:

答案 0 :(得分:0)

为什么不只使用索引值(从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>

答案 1 :(得分:0)

简单点吧! 想象一下,您有一个包含项目的简单列表。

<div id="editor">
   <div id="example">
     <ul id="example-1">
      <li v-for="item in items" :key="item.id">
        <span>{{ item.message }}</span>
        <button v-on:click="item.count += 1">{{ item.count }}</button>
      </li>
    </ul>
  </div>
</div>

您的数据是

new Vue({
  el: '#editor',
  data: {
    counter: 0,
    items: [
      { id: 1, message: 'Foo', count: 1 },
      { id: 2, message: 'Bar',  count: 1 }
    ]
  },
})

希望它能提供帮助。谢谢