Необходим доступ к индексу предметов в таблице Bootstrap Vue при выполнении цикла - PullRequest
Новая
       15

Необходим доступ к индексу предметов в таблице Bootstrap Vue при выполнении цикла

0 голосов
/ 24 апреля 2019
  1. У меня есть родительская b-таблица Bootstrap-Vue, в которой выполняется цикл для ставок. У каждой ставки также есть предметы. Первоначально он показывает каждую ставку в каждой строке.
  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 имеет код таблицы.

1 Ответ

0 голосов
/ 13 июня 2019

Полные данные об элементе строки доступны в слоте подробных данных. Если информация о ставке является подмассивом предмета, вы можете просто передать этот массив в дочернюю 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>
...