检测Vuetify收音机是否重新选择

Question

我正在开发一个向导，在该向导中，选择单选按钮也会触发导航。也可以返回更改以前的选择。我遇到的问题是，似乎没有一个好的方法来检测Vuetify中单选按钮的重新选择。

• @change仅在更改时触发
• 没有@click或@input事件
• 收听@mouseup将取消@change

理想情况下，我要做这样的事情：

<template>
<v-container>
<div v-if="step === 0">
<h1>Wizard: step 1</h1>
<v-radio-group 
v-model="fruit" 
label="Pick your fruit"
@input="step++"
>
<v-radio
value="apple"
label="Apple"
/>
<v-radio
value="orange"
label="Orange"
/>
</v-radio-group>
</div>
<div v-else-if="step === 1">
<h1>Wizard: step 2</h1>
<p>Prev choice: {{fruit }}</p>
<v-btn @click="step--">Go back</v-btn>
</div>
</v-container>
</template>
<script>
export default {
data: () => ({
step: 0,
fruit: "apple"
})
}
</script>

代码笔：https://codepen.io/peteruithoven/pen/qBbGMPL

我找到的一个解决方法是在包装div中添加一个点击，然后忽略div本身的点击。

<template>
<v-container>
<div v-if="step === 0">
<h1>Wizard: step 1</h1>
<v-radio-group 
v-model="fruit" 
label="Pick your fruit"
>
<div @click="onClick" ref="clickDetector">
<v-radio
value="apple"
label="Apple"
/>
<v-radio
value="orange"
label="Orange"
/>
</div>
</v-radio-group>
</div>
<div v-else-if="step === 1">
<h1>Wizard: step 2</h1>
<p>Prev choice: {{fruit }}</p>
<v-btn @click="step--">Go back</v-btn>
</div>
</v-container>
</template>
<script>
export default {
data: () => ({
step: 0,
fruit: "apple"
}),
methods: {
onClick(event) {
if(event.target !== this.$refs.clickDetector) {
this.step++;
}
}
}
}
</script>

带解决方法的Codepen：https://codepen.io/peteruithoven/pen/KKVLGdR

有更好的方法吗？

Answer 1

您应该能够针对本机点击事件，如：

<v-radio
value="apple"
label="Apple"
@click.native="onSelection('apple')"
/>

如果可以的话，我也会考虑只使用一个按钮，因为这是大多数用户可能期望的。