因此，我正在创建一个相当复杂的 Vue 应用程序，它从后端 API 获取数据并将其显示在前端，具体取决于用户选择的过滤器。它的默认设置是立即显示所有内容，然后一旦用户选择过滤器，它就会拉出不具有这些属性的“卡片”组件。直到今天，一切都很顺利，我尝试通过他们的 API 将 Google 地图添加到其中（我使用 vue2-google-maps 包来使这对我自己来说更容易，因为我们计划将来实现折线） 。
问题是我正在利用 Foundation 作为我的 CSS 框架并在 Reveal 模式中初始化地图。我能够在控制台中没有任何警告的情况下使模式正常工作的唯一方法是使用我在网上找到的一个示例，该示例利用了 Mounted() 属性：
mounted() {
$(this.$el).foundation();
},
unmounted() {
$(this.$el).foundation.destroy();
}
这非常有效，直到我尝试在模态中调用 Google 地图，因为它不是在模态触发时创建地图，而是在页面加载时创建所有内容。如果我只创建几张地图，这没什么大不了的……但加载时我会渲染 92 张地图。正如您可以想象的那样，这非常慢。
以最简单的形式，我的应用程序的结构是：
<app>
<filters-component></filters-component>
<div class="off-canvas-content">
<nav-component></nav-component>
<div class="row card-grid">
<card-component>
<modal-component></modal-component>
</card-component>
</div>
</div>
</app>
目前，模态组件是唯一的嵌套组件，主要是为了更容易跟踪哪个模态属于哪个卡片。
之前，我使用一种方法来触发每个模态，如下所示，在打开模态按钮上使用 @click 事件，但是，这仍然会在加载时呈现所有地图，并且还会给出一个控制台错误，内容为“VM215130:180 Tried初始化已具有 Foundation 插件的元素上的 Reveal。”如果您多次单击该按钮。
<a :data-toggle="'modal-' + school.id" @click="openModal(school.id)" class="float-right" tabindex="0" aria-label="Open More window" title="Open More window">
More <icon name="info-circle" label="More information icon"></icon>
</a>
<script>
export default {
methods: {
openModal: function($schoolid) {
$('#modal-' + $schoolid).foundation();
console.log('modal-' + $schoolid + ' launched')
}
}
</script>
有没有办法仅在单击此按钮时创建模态组件，或者仅在打开模态时以某种方式延迟加载它？
