Javascript 带引导vue的VueJS：表中的一列没有数据

我对VueJS和引导vue表有一个“小”问题

“Fahrer”列有数据，但只有在单击排序箭头或“详细信息”选项卡时（例如，“刷新”视图时），数据才可见。我不知道如何解决这个问题

<template>
<div style="width: 80vw;">
<b-card no-body>
      <b-tabs card v-model="tabIndex" >
        <b-tab title="Übersicht">
          <b-table responsive flex style="width: 100%; max-height: 70vh;" @click="tableClick" striped hover :items="tours" :fields="fields" :current-page="currentPage" :per-page="perPage" >

    <template slot="actions" slot-scope="row">
        <b-button size="sm" @click.stop="tableClick(row.item)" class="mr-1">
          Info
        </b-button>
    </template>
    </b-table>
    <div class="pagination-div">
      <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage"/>
    </div>
        </b-tab>
        <b-tab title="Details">
          //...
        </b-tab>
      </b-tabs>
    </b-card>       
    </div> 
</template>

<script>
import { HTTP } from '@/axioscommon'
import Minimap from '@/components/Elements/Minimap'

export default {
  name: 'tours',
  components: {
    Minimap
  },
  data () {
    return {
      //...,
      tours: [{
        id: '',
        kfz: '',
        loadno: '',
        driver: '',
        contracts: [''],
        device: ''
      }],
      fields: [
        {
          key: 'loadno',
          label: 'Ladeschein',
          sortable: true
        },
        {
          key: 'tourname',
          label: 'Tourname',
          sortable: true
        },
        {
          key: 'driver',
          label: 'Fahrer',
          sortable: true
        },
        {
          key: 'kfz',
          label: 'Kennzeichen',
          sortable: true
        },
        {
          key: 'actions',
          label: '',
          sortable: false
        }
      ]
    }
  },
  methods: {
    tableClick (row, index) {
      //...
    },
    fetchInitialData () {
      HTTP.get('tour')
       .then(response => {
         this.totalRows = response.data.length
         for (let index = 0; index < response.data.length; index++) {
           HTTP.get('driver/' + response.data[index]['driverID'])
            .then(drv => {
              response.data[index].driver = drv.data['firstname'] + ' ' + drv.data['lastname']
            })
         }
         console.log(response.data)
         this.tours = response.data
       })
    }
  },
  mounted () {
    this.fetchInitialData()
  }
}
</script>
<style scoped>
.fade.show {opacity: 1}
</style>

信息
//...
从“@/axiocommon”导入{HTTP}
从“@/components/Elements/Minimap”导入小地图
导出默认值{
名称：'旅游'，
组成部分：{
小地图
},
数据（）{
返回{
//...,
旅游：[{
id:“”，
kfz:“，
加载编号：“”，
驱动程序：“”，
合同：['']，
设备：“”
}],
字段：[
{
键：“loadno”，
标签：“Ladeschein”，
可排序：正确
},
{
关键字：“tourname”，
标签：“Tourname”，
可排序：正确
},
{
钥匙：“司机”，
标签：“Fahrer”，
可排序：正确
},
{
键：“kfz”，
标签：“Kennzeichen”，
可排序：正确
},
{
关键：“行动”，
标签：“”，
可排序：false
}
]
}
},
方法：{
表格单击（行、索引）{
//...
},
fetchInitialData（）{
HTTP.get（'tour'）
。然后（响应=>{
this.totalRows=response.data.length
for（让index=0；index{
response.data[index].driver=drv.data['firstname']+''+drv.data['lastname']
})
}
console.log（response.data）
this.tours=response.data
})
}
},
挂载（）{
this.fetchInitialData（）
}
}
.fade.show{opacity:1}

我已经用几种浏览器对它进行了测试，但没有成功。我正在使用： Vue 2.5.2 自举4.0.0 引导Vue 2.0.0

---

Webpack 2.6.1

this.tours=response.data

在HTTP.get（'driver/'）完成之前设置。而且您只更改对象属性，因此Vue无法检测到更改。 您可以通过深度复制阵列来修复此问题

fetchInitialData () {
    HTTP.get('tour')
     .then(response => {
       this.totalRows = response.data.length
       for (let index = 0; index < response.data.length; index++) {
         HTTP.get('driver/' + response.data[index]['driverID'])
          .then(drv => {
            const driverName = drv.data['firstname'] + ' ' + drv.data['lastname']
            const tours = [...this.tours]
            // or const tours = JSON.parse(JSON.stringify(this.tours))
            tours[index].driver = driverName
            this.tours = tours
          })
       }
       console.log(response.data)
       this.tours = response.data
     })
  }

fetchInitialData（）{
HTTP.get（'tour'）
。然后（响应=>{
this.totalRows=response.data.length
for（让index=0；index{
const driverName=drv.data['firstname']+''+drv.data['lastname']
const tours=[…this.tours]
//或const tours=JSON.parse（JSON.stringify（this.tours））
tours[index]。驱动程序=驱动程序名
这个旅行团
})
}
console.log（response.data）
this.tours=response.data
})
}