时间戳

首页 > 解决方案 > 循环时需要访问 Bootstrap Vue 表中的项目索引

vuejs2 - 循环时需要访问 Bootstrap Vue 表中的项目索引

问题描述

  1. 我有一个 Bootstrap-Vue 父 b 表运行循环投标。每个投标也有项目。最初，它显示每行的每个出价。
  2. 单击该行时，它会显示一个包含每个投标项目的子表。因此，内部的子表<template slot="hidden-details>会尝试循环bid.items显示每个出价的这些项目。由于我无法获得较早的出价循环索引，因此我无法运行此嵌套循环，除非我手动将其设置为：:items="bid[0].items

脚本

new Vue({
      el: '#app',
      data:{
           bids: [{
              id: "Bid Number One",
              item: [{
                  item_number: 11,
                  item_text: "Item 1 Comment 1",
                  code: "1",
                },
                {
                  item_number: 22,
                  item_text: "Item 1 Comment 2",
                  code: "2",
                }
              ]
            },
            {
              id: "Bid Number Two",
              item: [{
                  item_Number: 33,
                  item_text: "Item 2 Comment 3",
                  code: "3",
                },
                {
                  item_Number: 44,
                  item_text: "Item 2 Comment 4",
                  code: "4",
                }
              ]
            }
          ],
         bidHeaderFields:[
         {key:"id", label: "Header"},
                 ],
         bidIndex: 0,
        },

      methods: {
            showBidItems(bids, index) { // Here I receive row index from @row-clicked
              this.bids[index]._showDetails = !this.bids[index]._showDetails;
              this.bidIndex = index; // I change the value of bidIndex to row-clicked index
             
            
          },
         }
})

这个 JSFiddle有表格代码。

标签： vuejs2bootstrap-vue

解决方案

完整行的项目数据在作用域详细信息槽中可用。如果投标详细信息是项目的子数组，您可以将该数组传递给子 b 表：

<b-table :items="bids" :fields="..." ... >
  <template slot="row-details" slot-scope="{ item }"> // item === 'bid' row data
    // item.item === the rows 'item' array
    <b-table :items="item.item" :fields="..."></b-table>
  </template>
</b-table>

推荐阅读