لود نشدن نقشه ی کامپوننت vue2 leaflet در تب

برای کار کردن با Vue2-Leaflet باید ساختاری شبیه زیر رو دنبال کنید:

تمپلت :

<div id="app">
    <l-map ref="map" :zoom="zoom" :center="center">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        <l-marker :lat-lng="marker"></l-marker>
    </l-map>
</div>

اسکریپت :

let { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'© ',
      marker: L.latLng(47.413220, 31.219482),
    }
  }
});

@ali.bayat

از هیمن کد استفاده میکنم تنها مشکلم اینه نقشه کامل لود نمیشه دوستان میگن باید یه کد بنویسی ک هروقت روی تب کلیک شد نقشه ریلود بشه ولی نمیدونم چطور

خوب از اِوِنت ها استفاده کنید.
اگر کلیک شدن رو داخل Vue میخواهید دسترسی داشته باشید:

<TabComponent @click="doSomething"> </TabComponent>

و اگر میخواهید از اِوِنت‌های مپ استفاده کنید٬ آدرس زیر:
https://leafletjs.com/reference-1.3.0.html#map-event

سلام من تازه میخوام با map کار کنم
امکاناتی که میخوام رو کامپوننت leaflet داره
ولی نمیدونم چطوری باید تنظیمش کنم و چه امکاناتی داره
یه منبع فارسی مناسب میشه معرفی کنید بهم؟

@saeediyacsd
بله متاسفانه بعضی وقت ها این مشکل بنا به استفاده از استایل های مخلف در قالب های مختلف رخ میده.
طبق این issue خیلی ها مثل شما به این مورد برخوردن
https://github.com/vue-leaflet/Vue2Leaflet/issues/96
این رو به کدتون اضافه کنید ، احتمال زیاد حل بشه.

mounted() {
      setTimeout(function() { window.dispatchEvent(new Event('resize')) }, 250);
}

ویرایش:
در صورتی که حل نشد ، راه حل های دیگه هم در اون issue هست ، اون ها رو بررسی کنید.