将单选按钮的标签移到单选按钮上方

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

使用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>

这是两个解决方案的an example。

Answer 2

如果您希望每个单选按钮的标签位于按钮上方，那么您可以自己手动处理所有布局，而无需像这样的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 3

目前，行模式下的 v-radio-group 是一个 flexbox。因此，您可以为图例元素设置 100% 的宽度，这将强制换行。例如

.v-input--radio-group__input legend{
  width: 100%
}