我开发地图组件

一次要显示多个地图

在一个列表里面显示多个地图

弹窗修改一个地图信息,保存后,重新获取列表数据,让地图显示新的信息,但是地图没有变化.

考虑到是 v-for 设置的 key 没有变化,地图组件就不重置.

就把组件的key设置为随机数,但是在修改地图信息后

报错 Error: Map container not found, 因为地图要在一个带id属性的div上渲染, 应该是div模板没渲染完, 地图的初始化代码先执行了

不用随机key了, 想到了把列表数据先设置为空,然后再赋值,就好了

js:

this.list = []
this.$nextTick(() => {
    this.getList(this.id)
})


模板里这样写
<div class="item" v-for="item in AreaList" :key="item.id">
                    <!--展示地图-->
                    <map-show-land
                        v-if="item && item.map_zoom"
                        width="250px"
                        height="261.6px"
                        :lid="item.id"
                        :points="item.points"
                        :lnglat="item.map_lnglat"
                        :zoom="item.map_zoom"
                        :color="item.map_style"
                    ></map-show-land>
</div>```
但是会有白屏一秒,先这样