Vue CLI的v-data-table中未显示任何记录

时间:2019-12-27 04:24:10

标签: vue.js vue-component vuetify.js

我需要帮助来显示从API查询到Vue JS数据表的记录。目前,我正在获取期望的记录,并且已经将其分配给我的Vue变量。请参阅下面的屏幕快照的链接。

Records assigned in vue datatable

但是正如您所看到的,即使记录已经分配给数据表的items属性,数据表也没有出现在UI上。请在下面查看我的代码。

Vue模板

  <v-row>
    <v-col cols="12" sm="12" md="12">
      <v-data-table
      :headers="headers"
      :items="records"
      item-key="Company"
      :items-per-page="5"
      class="elevation-1"
      :expand="expand"
    >
     <template v-slot:items="props">
        <td>{{ props.item.Company }}</td>
        <td>{{ props.item.FirstName }}</td>
        <td>{{ props.item.LastName }}</td>
     </template>
    </v-data-table>
   </v-col>
 </v-row>

Vue脚本

   export default {
   name: 'Home',
   data: function() {
       return {
         headers: [
           { text: 'Company', value: 'Company'},
           { text: 'FirstName', value: 'FirstName'},
           { text: 'LastName', value: 'LastName'},
         ],
         Company: '',
         FirstName: '',
         LastName: '',
         records: []
      };
   }

希望您能帮助我。预先谢谢你。

0 个答案:

没有答案