Vue+Vuetify中如何点击v-list项选中v-radio按钮

我帮你搞定这个需求啦！其实只要给列表项添加点击事件，同步更新单选组的绑定值就能实现，和复选框的点击选中逻辑类似。下面是完整的实现代码和关键说明：

完整代码示例 #

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-list two-line>
          <v-radio-group :mandatory="true" v-model="selectedItem">
            <v-list-item 
              v-for="item in items" 
              :key="item.value"
              @click="selectedItem = item.value"
              :class="{ 'v-list-item--active': selectedItem === item.value }"
            >
              <v-list-item-action>
                <v-radio :value="item.value"></v-radio>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
                <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-radio-group>
        </v-list>
      </v-container>
    </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedItem: null,
      items: [
        { title: '选项1', subtitle: '这是选项1的副标题', value: 'option1' },
        { title: '选项2', subtitle: '这是选项2的副标题', value: 'option2' },
        { title: '选项3', subtitle: '这是选项3的副标题', value: 'option3' }
      ]
    }
  }
})

关键实现细节 #

• 点击事件绑定：给每个<v-list-item>添加@click="selectedItem = item.value"，这样点击列表项任意区域都会把当前项的value赋值给单选组的绑定变量selectedItem，从而选中对应的v-radio
• 状态同步：v-radio的:value和列表项的item.value对应，结合v-radio-group的v-model="selectedItem"，确保单选按钮和列表项的选中状态完全同步
• 视觉反馈：通过:class="{ 'v-list-item--active': selectedItem === item.value }"给选中的列表项添加Vuetify内置的激活样式，用户能直观看到哪个项被选中

这样实现后，不管是点击单选按钮还是点击整个列表项，都能正确触发选中状态，和你想要的复选框点击效果一致~

内容的提问来源于stack exchange，提问作者nara_l