在组件初始化期间,Vuetifyjs DataTable会发出2个额外的http请求

时间:2018-06-13 22:20:01

标签: vue.js axios vuetify.js

组件的模板:

<v-layout>
<v-flex>
    <v-data-table :headers="headers" :items="items" :search="search" :pagination.sync="pagination" :total-items="totalItems"
     :loading="loading" class="elevation-1" :rows-per-page-items="sizes">
        <template slot="items" slot-scope="props">
            <td>{{ props.item.itemWebCode }}</td>
            <td>{{ props.item.description }}</td>
            <td>{{ props.item.sequence }}</td>          
        </template>
    </v-data-table>
</v-flex>

组件js code

 import itemHttpService from './../../../services/itemsHttpService.js'
export default {
  name: 'items',
  data: () => ({
    items: [],
    loading: true,
    pagination: {},
    totalItems: 0,
    sizes: [10, 30, 60],
    search: '',
    headers: [
      { text: 'ItemWebCode', align: 'left', sortable: false, value: 'itemWebCode' },
      { text: 'Description', align: 'left', value: 'description', sortable: false },
      { text: 'Sequence', align: 'left', value: 'sequence', sortable: false }
    ],
  }),
  async mounted() {
    await this.getItems();
  },
  watch: {
    pagination: {
      async handler() {
        await this.getItems();
      },
      deep: true
    }
  },
  methods: {
    async getItems() {
      this.loading = true;
      var resp = await itemHttpService.getItems(this.pagination.page, this.pagination.rowsPerPage);
      this.items = resp.data.items;
      this.totalItems = resp.data.totalItems;
      this.loading = false;
    }
  }
}

itemHttpService档案:

import HTTP from './httpBase.js';

const service = {
    getItems: async (page, size) => HTTP.get('items', {
        params:{
            page: page,
            size: size
        }
    }),     
};
export default service;

httpBase档案:

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://localhost:53403/api/'
});
export default http;

我必须说数据表呈现并且运行良好。但找到了看起来的东西 对我来说有点奇怪,我很确定我犯了愚蠢的错误。当组件初始化服务器收到另外两个GET请求时:http://prntscr.com/juo7yu
是否有人知道我做错了什么?

1 个答案:

答案 0 :(得分:0)

该错误已在v1.1.0-alpha.6

中修复