javascript - 如何使用 vuejs 为 v-radio-button 的每个项目添加字幕？

Question

我创建了一个带有 v-radiobuttons 的动态项目列表。我要添加的是它们下方每个项目的副标题。我尝试了一些方法，但没有任何效果。这是代码：

 <v-radio-group v-model="institutionSelected">
 <v-radio v-for="(institution, index) in itemInstitutions" 
 :label="institution" :key="index" :value="index"> </v-radio> 
  </v-radio-group>

//这是每个项目的字幕列表：

 <v-list-item-subtitle v-text="itemRoles[index]"></v-list-item-subtitle>

我希望它看起来像这样：

但实际上看起来是这样的：

提前致谢！

标签： javascriptvue.jsvuetify.js

Answer 1

尝试按v-radio-group组件包装列表项，然后循环itemInstitutions使用v-list-item组件和单选按钮作为列表项标题：

 <v-radio-group v-model="institutionSelected">
  <v-list-item two-line v-for="(institution, index) in itemInstitutions" :key="index">
        <v-list-item-content>
          <v-list-item-title>
            <v-radio :label="institution" :value="index"></v-radio>
            </v-list-item-title>
          <v-list-item-subtitle class="ml-8">{{itemRoles[index]}}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
</v-radio-group>

演示