Vue.js Vue、传单、映射框-未找到错误映射容器

我的理解是，错误是由于我的代码试图在呈现HTML元素之前初始化映射造成的。据推测，在

mounted（）

中将映射初始化为var应该可以修复它。我尝试了建议的修复方法，但它对我不起作用

我在HTML中设置参考值：

<div class="map-container-column">
    <div class="map banner-map" id="map" ref="myMap"></div>
</div>

---

我做错什么了吗？如果不是，还有什么可能导致这个错误呢？

在过去的几天里，同样的事情一直困扰着我。我的主要学习点是，如果DOM中不存在

#map

元素，那么传单就不能将其自身注入该元素，这是StackOverflow上的每个人都会告诉您的。不太明显的是，DOM中不存在

#map

，如果-可能是由于祖先元素上的

v-if

或使用Vue路由器-元素不“可见”（在Vue的意义上）

---

确保传单代码仅在呈现了

#map

时注入的一个好方法是将

#map

制作成一个组件，使用它自己的

挂载（）

钩子。这样，您就知道

mounted（）

只会在渲染组件时应用并运行，每次渲染组件时（例如，在某个地方通过

v-if

切换）。

过去几天，同样的事情一直困扰着我。我的主要学习点是，如果DOM中不存在

#map

元素，那么传单就不能将其自身注入该元素，这是StackOverflow上的每个人都会告诉您的。不太明显的是，DOM中不存在

#map

，如果-可能是由于祖先元素上的

v-if

或使用Vue路由器-元素不“可见”（在Vue的意义上）

---

确保传单代码仅在呈现了

#map

时注入的一个好方法是将

#map

制作成一个组件，使用它自己的

挂载（）

钩子。这样，您就知道

mounted（）

只会在呈现组件时应用并运行，并且每次呈现组件时（例如，在某个地方通过

v-if

切换）。

模板中的Refs vs ref属性这在我发表文章时是一个错误。在我的代码中是

ref

。很抱歉，代码应该没问题。请提供一个复制示例（例如在Plunker、StackBlitz等）模板中的Refs vs ref属性，这在我发表文章时是一个错误。在我的代码中是

ref

。很抱歉，代码应该没问题。请提供复制示例（例如关于Plunker、StackBlitz等）

mounted() {
var map = L.map(this.$refs.myMap, {
                    zoomControl: false,
                    closePopupOnClick: false
                }).setView(regionCoords, 10);
                this.tileLayer = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
                    minZoom: 9,
                    maxZoom: 15,
                    accessToken: MapBoxApiKey,
                    style: 'mapbox://styles/mapbox/streets-v9',
                    attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v9&amp;access_token=pk.eyJ1IjoiaGlnaGxhbmRob21lc2RpZ2l0YWwiLCJhIjoiY2psNzJrdmwwMzN0ZDNxcWpwNnRteDJ5aiJ9.ENhvxwa1PF2i8f6xCcgLLA" target="_blank">Improve this map</a>',
                });
                this.tileLayer.addTo(map);
                L.control.zoom({
                    position: 'topright'
                }).addTo(map);
}