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

我希望它看起来像这样：

但实际上看起来像这样:

提前致谢！

Answer 1

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

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

DEMO

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

How to put a subtitle for each item of v-radio-button using vuejs?

javascript

vue.js

vuetify.js