Loop inside modal Bootstrap Vue js

Question

I have a detail about an object inside my object fetched from the API. I would like to add a loop inside of the modal to show the details when I click.

data: function() {
    return {
      fields: [
      { key: 'customerOrderDelay', label: this.$t('metricsTable.column-name34'), sortable: true, class: 'text-center' },
      { key: 'supplierOrders', label: "suppllier order", sortable: true, class: 'text-center' },
      { key: 'actions', label: 'Actions' }
    ]
   }
}

SupplierOrders is an object and I want to print the details with a loop inside the modal:

<b-modal :id="infoModal.id" :title="infoModal.item.orderAmount" ok-only @hide="resetInfoModal">
 <!-- <pre>{{ infoModal.content }}</pre> -->

 <div v-for="foo in infoModal.item.supplierOrders" ><md-card md-with-hover>
  <md-ripple>
    <md-card-header>
      <div class="md-title">{{foo.supplierOrderNumber}}</div>
      <div class="md-subhead">{{foo.supplierName}}</div>
    </md-card-header>

    <md-card-content>
     {{foo.sectionName}}
    </md-card-content>

    <md-card-actions>
    </md-card-actions>
  </md-ripple>
</md-card>

the table :

 <b-table
    :tbody-tr-class="rowClass"
    :busy="isBusy"
    responsive="true"
    :sticky-header="stickyHeader"
    small
    :items="totalOrders"
    :fields="fields"        
    :per-page="300"        
    :filterIncludedFields="filterOn"
    :sort-by="sortBy"
    @sort-changed="sortTable"
    >

It seems that I cannot access the object inside the object used by bootstrap-vue's table: Does anyone know how to override it?

The code you provided seems to only be 50% of the context you're giving. You say you have a table, but it isn't in the code you provided. Could you edit your post to include it? — Hiws, Oct 31 '19 at 14:54

Loop inside modal Bootstrap Vue js

0 Answers0