Удаление пустого пространства элемента внутри v-layout [Vue + Vuetify]

Question

Я хотел сделать шаговый дисплей для форм вверху, и я не могу понять, почему есть пробел или, вернее, почему последний интервал для v-divider показан даже с v-if на месте,Я использую Vue + Vuetify 1.2

Вот так выглядит мой шаблон

<v-layout row style="padding: 25px 0;">
    <v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index">
        <div class="ml-4 mr-4 caption">
            <v-layout class="mb-1">
              <v-icon small style="margin: auto;">{{ item.icon }}</v-icon>
            </v-layout>
            {{ item.title }}
        </div>
        <v-divider v-if="index !== stepperInfo.length - 1"></v-divider>
    </v-layout>
</v-layout>

И для данных,У меня просто так:

stepperInfo: [
            {
                icon: 'fa-building',
                title: 'Step 1'
            },
            {
                icon: 'fa-briefcase',
                title: 'Step 2'
            },
            {
                icon: 'fa-clipboard-list',
                title: 'Step 3'
            },
            {
                icon: 'fa-file-invoice-dollar',
                title: 'Step 4'
            },
            {
                icon: 'fa-users',
                title: 'Step 5'
            }
        ]

Answer 1

Как указано, v-layout применяет стиль flex: 1 1 auto к каждому элементу / шагу. Первое значение для сокращенного свойства flex равно flex-grow, которое при значении 1 означает, что элемент будет расширяться, чтобы заполнить все доступное пространство. Это означает, что контейнер для вашего последнего шага занимает 1/5 (для 5 шагов) доступной ширины. Поскольку содержимое вашего последнего шага содержит только выровненный по левому краю значок / текст, в конце вы получите вид белого пространства. Простым подходом было бы помешать вашему последнему шагу расти и, таким образом, занимать равную ширину с другими шагами.

Я не смог найти способ управления свойством flex-grow с помощью реквизитов, предоставленных Veutify, но вы можете переопределить свойство самостоятельно на каждом шаге следующим образом:

<v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index" v-bind:style="{'flex-grow': index === (stepperInfo.length - 1) ? 0 : 1}">

Однако это будет без необходимости применять flex-grow: 1 ко всем шагам, кроме последнего. Есть несколько способов исправить это, например, перевести flex-grow: 0 в класс last-step, который применяется только к последнему шагу, как показано в этом codepen :

<v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index" v-bind:class="{'last-step': index === (stepperInfo.length - 1)}">

Вы также можете использовать селектор :last-child CSS только для подхода CSS, как показано в этом codepen . Примените steps класс к родителю v-layout:

<v-layout row style="padding: 25px 0;" class="steps">

И добавьте следующий CSS для установки flex-grow: 0 в последнем непосредственном дочернем элементе .steps элемента:

.steps >:last-child {
  flex-grow: 0 !important;
}