vue-strap警报组件即使隐藏也会占用空间

Question

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

<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 dev扩展突出显示了空间)：

​

​

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

Answer 1

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

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