v-radio object not reacting as expected

I am following the code from this post. This is how my index.vue file looks like:

<template>
<v-app>
    <v-radio-group>
        <v-radio active-class="active" key=1 label="3.5t" color="primary" value="3.5t">
            <template v-slot:label>
                <v-card width="170" color="white" class="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="3.5t">
            <template v-slot:label>
                <v-card width="170" color="white" class="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() {}
}
</script>

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

However, I have two problems. Firstly, when I click on the first radio button it selects the second one as well. Secondly, it is not marking the objects as expected.

I am nut sure if I am implementing something wrongly or the script is not being configured as it should be.

>Solution :

You should give a v-model to your v-radio-group then you access to your value.

Something like below:

  <v-radio-group v-model="selectedOption" @change="onChange">
    <v-radio active-class="active" key=1 label="3.5t" color="primary" value="3.5t">
        <template v-slot:label>
            <v-card width="170" color="white" class="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="3.5t">
        <template v-slot:label>
            <v-card width="170" color="white" class="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>


<script>
export default {
    data() {
        return {
            selectedOption: '3.5t', // Your default value
        }
    },
    methods: {
        onChange(){
            console.log("selected option:   ", this.selectedOption);
        }
    }
}