Скрыть шаблон без данных до тех пор, пока данные не загрузятся через Axios - PullRequest
Новая
       17

Скрыть шаблон без данных до тех пор, пока данные не загрузятся через Axios

1 голос
/ 29 мая 2019

У меня есть типичная таблица данных Vue с разделом шаблона, который отображает предупреждение, если записи не найдены. Проблема в том, что он отображается сразу, даже до того, как мой метод Axios сможет выйти и получить записи.

Как я могу предотвратить мигание красного предупреждающего сообщения до загрузки фактических данных? 

<template>
  <div>
    <v-card>
      <v-card-title>
        <h1>Locations</h1>
      </v-card-title>

      <v-data-table :headers="headers" :items="locations" :search="search" :fixed-header="true" :loading="true" class="elevation-1">
        <template v-slot:items="location">
          <td>{{ location.item.id }}</td>
          <td>{{ location.item.company }}</td>
          <td>{{ location.item.category }}</td>
          <td>{{ location.item.name }}</td>
          <td>{{ location.item.city }}, {{ location.item.state }}</td>
        </template>
        <template v-slot:no-data>
          <v-alert :value="true" color="error" icon="warning">Sorry, no locations found.</v-alert>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
import { HTTP } from "@/utils/http-common";

export default {
  name: 'LocationsList',
  data() {
    return {
      headers: [
        { text: "Id", value: "id" },
        { text: "Company", value: "company" },
        { text: "Category", value: "category" },
        { text: "Name", value: "name" },
        { text: "City, State", value: "city" },
      ],
      locations: [],
      errors: []
    };
  },
  created: function() {
    this.getAllLocations();
  },
  methods: {
    getAllLocations() {
      HTTP.get("locations")
        .then(response => {
          this.locations = response.data;
        })
        .catch(err => {
          this.errors.push(err);
        });
    },
  }
};
</script>

1 Ответ

1 голос
/ 30 мая 2019
  1. Добавить состояние загрузки к данным и установить его в true
  2. Установить состояние загрузки после завершения вызова (окончательное обещание)
  3. Установить v-if вклв вашем шаблоне, чтобы показать, когда он больше не загружается

См. код ниже. 

<template>
  <div>
    <v-card>
      <v-card-title>
        <h1>Locations</h1>
      </v-card-title>

      <v-data-table :headers="headers" :items="locations" :search="search" :fixed-header="true" :loading="true" class="elevation-1">
        <template v-slot:items="location">
          <td>{{ location.item.id }}</td>
          <td>{{ location.item.company }}</td>
          <td>{{ location.item.category }}</td>
          <td>{{ location.item.name }}</td>
          <td>{{ location.item.city }}, {{ location.item.state }}</td>
        </template>
        <template v-slot:no-data>
          <v-alert v-if="!loading" :value="true" color="error" icon="warning">Sorry, no locations found.</v-alert>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
import { HTTP } from "@/utils/http-common";

export default {
  name: 'LocationsList',
  data() {
    return {
      headers: [
        { text: "Id", value: "id" },
        { text: "Company", value: "company" },
        { text: "Category", value: "category" },
        { text: "Name", value: "name" },
        { text: "City, State", value: "city" },
      ],
      locations: [],
      errors: [],
      loading: true
    };
  },
  created: function() {
    this.getAllLocations();
  },
  methods: {
    getAllLocations() {
      HTTP.get("locations")
        .then(response => {
          this.locations = response.data;
        })
        .catch(err => {
          this.errors.push(err);
        })
        .finally(() => {
          this.loading = false;
        })
    },
  }
};
</script>
...