Vuetify горизонтально выравнивает содержимое v-list-item - PullRequest
Новая
       45

Vuetify горизонтально выравнивает содержимое v-list-item

0 голосов
/ 26 мая 2020

Я работаю над навигационным ящиком с Vuetify и Vue. js. Я динамически генерирую элементы списка в этом ящике.

Каждый элемент списка состоит из значка, имени и значка удаления. Пока все есть, единственная проблема в том, что я просто не могу заставить 2 значка и текст внутри каждого элемента списка быть хорошо выровненными по вертикали .

Я добавил изображение, поэтому Вы можете увидеть, как это выглядит прямо сейчас. image

Это код моего компонента: 

    <v-list>
      <v-list-item
        class="ui-navigation"
        v-for="(block, index) in layouts2"
        v-bind:key="`layout-button-${block._uid}`">
        <v-list-item-icon>
          <v-icon
          v-on:click="switchLayouts(block._uid)">
              mdi-home-city
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
        </v-list-item-content>

        <v-list-item-content>
          <v-btn icon
            v-on:click="deleteLayout(block._uid)"
          >
            <v-icon>mdi-delete-outline</v-icon>
          </v-btn>
        </v-list-item-content>
      </v-list-item>
    </v-list>

Я рад любой помощи в решении этой, вероятно, простой проблемы!

...