Блог

Я пытаюсь создать элементы списка в Vuetify, состоящие из v-row s, содержащих 3 v-col , где третий столбец содержит флажок. Вот мой текущий код для элементов списка:

    <v-list-item v-for="(item, index) in data" :key="item.value"  class="ma-0 pa-0">
      <div class="ma-0 pa-0 pr-2 pl-2">
        <v-row class="d-flex" style="flex-direction:row" fill-height>
          <v-col class="handle d-flex align-center" cols="12" md="2">
            <v-icon>mdi-drag</v-icon>
          </v-col>
          <v-col class="d-flex  align-center"   cols="12" md="8">{{ item.text }}
          </v-col>
          <v-col class="d-flex align-right" cols="12" md="2">
              <v-checkbox  class="d-flex" @change="handleToggle(index)" :input-value="item.show">
              </v-checkbox>
          </v-col>
        </v-row>
      </div>
  

И в итоге это выглядит так:

Как я могу настроить флажок для выравнивания по правому краю, чтобы они были выровнены по вертикали?

Добавьте класс к тому, который переносит и добавляет к стилю. d-flex div <v-row> width: 100% Затем добавьте определенную ширину к родительскому v-list-item элементу, чтобы он не заполнял страницу.

 <v-list style="width: 400px;">  <!-- Add specific width to the parent -->

  <v-list-item ... >
     <div class="... d-flex" style="width: 100%">  <!-- Add d-flex and width: 100% here -->
       <v-row ... >
         <v-col ... >...</v-col>
         <v-col ... >...</v-col>
         <v-col ... >...</v-col>
       </v-row>
     </div>
  </v-list-tem>

</v-list>
  

Вот демонстрация.