vue-strap alert 组件即使隐藏也占用空间

Question

我在 Vue 2.5.16 组件中使用 wffranco/vue-strap 警报：

<accordion :one-at-atime="true" type="info">
    <panel type="primary" :header="'Week ' + cycle.week + ': ' + cycle.name" v-for="(cycle, index) in cycles" :key="cycle.id">
        <alert :type="alerts[cycle.id] ? alerts[cycle.id].type : 'error'" v-if="alerts[cycle.id] !== null">
            {{ alerts[cycle.id] ? alerts[cycle.id].msg : '' }}
        </alert>
        <form v-on:submit.prevent="update">
            <label :for="'location_' + cycle.id">Location</label>
            ....various other elements...
        </form>
    </panel>
</accordion>

即使v-if="alerts[cycle.id] !== null" 隐藏了警报，它仍然占用页面中的垂直空间，如下所示（我使用 Vue JS Chrome 开发扩展突出显示了空间）：

如何防止警报占用垂直空间？

Answer 1

我不知道为什么，但你总是可以添加一个包装来隐藏它。 <template> 可以用作空包装器。

...
<template v-if="alerts[cycle.id] !== null">
        <alert ...>
            ...
        </alert>
</template>
...