在模态Bootstrap Vue js中循环

时间:2019-10-31 13:36:07

标签: vue.js bootstrap-vue

我有关于从API提取的对象内部的对象的详细信息。我想在模式内部添加一个循环,以在单击时显示详细信息。

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是一个对象,我想用模态内的循环打印细节:

<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>

表格:

 <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"
    >

似乎我无法访问bootstrap-vue的表使用的对象内的对象:有人知道如何重写它吗?

0 个答案:

没有答案