vue.js - Vue、Leaflet、访问 ref 对象/函数

Question

我在 vue 项目中有一个正在运行的传单 map 。例如(仅包含相关的 vue 代码)。

<div style="height:70vh; width:100%; position: relative;">
      <l-map ref="map" :zoom="maps_obj.zoom" :center="[maps_obj.latitude, maps_obj.longitude]">
        <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"></l-tile-layer>
      </l-map>
</div>

<script>
import 'leaflet/dist/leaflet.css';
import { defineComponent, ref } from 'vue';
import {
  LMap, LMarker, LTileLayer, LIcon,
} from '@vue-leaflet/vue-leaflet';
import { icon } from 'leaflet';

methods: {
    test() {
      this.$nextTick(() => {
        this.$refs.map.mapObject.invalidateSize();
      });
    },
  },
</script>

map 本身运行完美。但为什么我无法像文档所述那样访问传单 api 并运行函数？ (https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)

它只是返回错误:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'invalidateSize')
 

Answer 1

当然，在发布这个问题后，我发现了“隐藏的答案”。mapObject现在被称为leafletObject..

this.$refs.map.leafletObject.invalidateSize();