Блог

Я строю vue2.js приложение, которое получает данные из API и отображает их в итераторе данных vuetify и на карте-листовке.

App.vue Компонент обрабатывает связь между другими компонентами (панель фильтров, панель списков и панель отображения) …

 <template>
  <div id="app">
    <v-app id="inspire">
      <v-app>
        <v-navigation-drawer app width="26em" class="pb-16 pb-lg-0">
          <FilterPanel @change="getData" />
        </v-navigation-drawer>
        <v-sheet id="widget-panel" app class="open" :elevation="8">
          <v-container
            class="grey lighten-5 scrollContainer"
            style="display: flex; overflow-y: auto; flex: 1"
          >
            <ListPanel :loading="loading" :data="data">
              <template #card="{ data }">
                <DataCard :data="data" :id="'data'   data.id"></DataCard>
              </template>
            </ListPanel>
          </v-container>
        </v-sheet>
        <v-main>
          <MapPanel :loading="loading" :data="data" />
        </v-main>
      </v-app>
    </v-app>
  </div>
</template>
 

.. и вызов API для получения данных.

 ...
  methods: {
    getData() {
      this.loading = true;
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => (this.data = json))
        .finally(() => (this.loading = false));
    },
  },
...
 

Внутри ListPanel.vue компонента определен слот, поэтому его можно использовать где-то еще с другой визуализацией данных.

 <template>
  <v-data-iterator
    no-results-text="no - data"
    loading="loading"
    loading-text="loading - data"
    no-data-text="no - data"
    :items="data"
    hide-default-footer
    disable-pagination
  >
    <template v-slot:default="props">
      <v-row>
        <v-col v-for="item in props.items" :key="item.id" cols="12">
         <slot name="card" :data="item">
            no slot provided
          </slot>
        </v-col>
      </v-row>
    </template>
  </v-data-iterator>
</template>

<script>
export default {
  name: "ListPanel",
  props: ["data", "loading"],
};
</script>
 

The MapPanel.vue component shows all data entries on the map with clickable markers, which will open popups to show some information about the data. The map also holds an loading indicator ( v-progress-linear ) to show if data is loading or not.

 <template>
  <l-map
    id="map"
    ref="myMap"
    :style="styleObject"
    v-if="showMap"
    :zoom="zoom"
    :center="center"
    :options="mapOptions"
  >
    <v-progress-linear
      style="z-index: 800 !important"
      :indeterminate="loading"
      :active="loading"
      absolute
      top
      color="info"
    ></v-progress-linear>
    <l-tile-layer :url="url" :attribution="attribution" />
    <l-control-zoom position="bottomright"></l-control-zoom>

    <l-marker
      v-for="(item, index) in markers"
      :key="'marker-'   index"
      :lat-lng="item.location"
    >
      <l-popup :options="getPopupOptions(item.id)">
        <DataCard :data="item" showRequest flat></DataCard>
      </l-popup>
    </l-marker>
  </l-map>
</template>
 

Для лучшего визуального представления я использую многоразовый компонент (карту данных) с v-картой для отображения необходимых данных.

Я настроил упрощенную версию приложения. https://codesandbox.io/s/sleepy-hoover-s5w5l

Загружая приложение или получая данные, позвольте приложению зависнуть на несколько секунд. Вы увидите это на индикаторе выполнения вверху. Анимация останавливается!

Я понял, что компонент v-карты замедляет работу всего приложения. Если я полностью удалю компонент карты, загрузка данных, похоже, будет работать нормально.

Получение данных из API не является проблемой, так как получение данных из него происходит очень быстро.

Расширение Vue DevTools в FireFox показывает проблемы с маркировкой карты и компонентом карты данных.

Поэтому я спрашиваю, что я делаю не так с компонентом карты данных ?