Vuetify v-radio组件点击选中异常、自定义样式未生效问题

• 单选联动选中：两个v-radio配置了完全相同的value值（均为"3.5t"），v-radio-group依靠value区分不同选项，值重复会被识别为同一个选项，点击自然会同步选中；同时你没有给单选组绑定v-model存储选中状态，不符合组件的基础使用要求。
• 选中样式不生效：一是CSS选择器写的是.active .trucksicons，但模板里的卡片元素根本没加trucksicons类名，匹配不到目标元素；二是scoped样式存在作用域隔离，直接写子元素选择器无法穿透组件边界命中渲染后的实际节点。

1. 给两个单选框配置互不相同的value值
2. 在data中定义选中状态字段，给v-radio-group绑定v-model
3. 给自定义标签内的v-card加上trucksicons类名，匹配CSS选择器
4. 给样式加深度选择器，绕过scoped的作用域限制

<template>
<v-app>
    <v-radio-group v-model="selectedTruck">
        <v-radio active-class="active" key=1 label="3.5t" color="primary" value="credit">
            <template v-slot:label>
                <v-card width="170" color="white" class="trucksicons d-flex align-center flex-column rounded-lg"
                    style="box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)">
                    <v-img class="mdi mdi-credit-card-plus"></v-img>
                </v-card>
            </template>
        </v-radio>
        <v-radio active-class="active" key=2 label="3.5t" color="primary" value="domain">
            <template v-slot:label>
                <v-card width="170" color="white" class="trucksicons d-flex align-center flex-column rounded-lg"
                    style="box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)">
                    <v-img class="mdi-domain"></v-img>
                </v-card>
            </template>
        </v-radio>
    </v-radio-group>
</v-app>
</template>

<script>
export default {
    data() {
        return {
            selectedTruck: ''
        }
    }
}
</script>

<style scoped>
.active :deep(.trucksicons) {
    border: 2px solid green;
}
</style>

补充说明：如果需要默认选中某一项，直接给selectedTruck赋对应选项的value值即可。

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