Question

所以，我正在创建一个相当复杂的Vue应用程序，它从我们的后端API获取数据并将其显示在前端，具体取决于用户选择的过滤器。它的默认设置是一次显示所有内容，然后一旦用户选择过滤器，它将拉出没有这些属性的“卡”组件。直到今天，一切都变得很好，我试图通过他们的API添加谷歌地图（我使用vue2-google-maps包让我自己更容易，因为我们计划将来实施Polylines）

问题是我正在使用Foundation作为我的CSS框架并在Reveal模式中初始化地图。在控制台中没有任何警告的情况下我能够使模态工作的唯一方法是使用我在网上找到的使用mounted（）属性的示例：

mounted() {
  $(this.$el).foundation();
},
unmounted() {
  $(this.$el).foundation.destroy();
}

这很有效，直到我尝试在模态中调用Google Map，因为它不是在模式触发时创建地图，而是在页面加载时创建所有内容。如果我只创建一些地图，那就不是什么大不了了...但是在线上我正在渲染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试图在已经有一个Foundation插件的元素上初始化揭示。“如果多次单击该按钮。

<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>

有没有办法只在单击此按钮时创建模态组件，或者只在模式打开时以某种方式延迟加载？

我可以动态创建/销毁Vue组件吗？

0 个答案: