Перемещение метки радиокнопки для размещения над радиокнопкой

Question

Итак, у меня есть кнопка с ярлыком. Проблема в том, что метка и кнопки находятся в одной строке (строке). Я хочу, чтобы мои кнопки были под этикеткой! Вот мой код:

<v-radio-group row v-model="voltage" @click="consoles" label="SELECT 
VOLTAGE:">
              <v-radio
                v-for="n in radioNames"
                :key="n"
                :label="n"
                :value="n"
              ></v-radio>
              </v-radio-group>
              <v-radio-group row v-model="dependency">

В настоящее время это выглядит так:

Как видите, метка и кнопки находятся в одной строке. Как мне переместить метку так, чтобы она находилась над кнопками (вверху слева. Как и «S» должен располагаться точно сверху левой кнопки)?

Answer 1

Если вы хотите, чтобы метки каждой радиокнопки были над кнопкой, то вы могли бы вручную обрабатывать всю раскладку без петли v-for, например:

<v-radio-group v-model="radioGroup">
  <v-layout row wrap>
  <v-flex column>
    <p>Label 1</p>
    <v-radio key=1 value=1>
      </v-radio>
    </v-flex>
  <v-flex column>
    <p>Label 2</p>
    <v-radio key=2 value=2>
      </v-radio>
    </v-flex>
  <v-flex column>
    <p>Label 3</p>
    <v-radio key=3 value=3>
      </v-radio>
    </v-flex>
  </v-layout>
</v-radio-group>

Answer 2

Использование p для метки

Насколько я вижу из Vuetify API , нет возможности установить label как column и v-radio как строку. Простым решением было бы добавить метку как отдельный элемент из v-radio-group:

<p>SELECT VOLTAGE:</p>
<v-radio-group row v-model="voltage" @click="consoles">
  <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-radio-group>

Использование v-layout

На основе @SnakeyHips answer существует простой способ установить элементы v-radio в строке. Используйте <v-layout align-start row>, чтобы обернуть только кнопки radio подряд:

<v-radio-group label="SELECT VOLTAGE:" v-model="row">
  <v-layout align-start row>
   <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
  </v-layout>
</v-radio-group>

Вот пример обоих решений.