v-radio对象未按预期反应

Question

我遵循这篇文章中的代码。这是我的index.vue文件的样子:

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

然而，我有两个问题。首先，当我点击第一个单选按钮时，它也选择了第二个。其次，它没有按预期标记对象。

我不确定我是否实现了错误的东西，或者script没有被配置成应该的样子。

Answer 1

你应该给你的v-radio-group一个v-model，然后你可以访问你的值

如下所示:

<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);
}
}
}