Javascript 检测Vuetify收音机重新选择？

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

• @change

  仅在更改时触发
• 没有

  @单击

  或

  @输入

  事件
• 收听

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

向导：步骤1
向导：步骤2
上一选项：{{fruit}

回去
导出默认值{
数据：（）=>({
步骤：0，
水果：“苹果”
})
}

代码笔：

我想出的一个解决办法是在包装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>

向导：步骤1
向导：步骤2
上一选项：{{fruit}

回去
导出默认值{
数据：（）=>({
步骤：0，
水果：“苹果”
}),
方法：{
onClick（事件）{
如果（event.target！==此.$refs.clickDetector）{
这个.step++；
}
}
}
}

代码笔与解决方案：

---

有更好的方法吗？

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

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

---

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

你应该能够瞄准本地点击事件，比如：

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

---

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

一个解决方案是设置默认值为“代码>”。它将强制用户选择一个单选按钮，而不是您最初为他们选择一个。一个解决方法是使用

this.fruit=''

设置默认值，然后如果用户返回，将其重置为

'

。这将迫使用户必须选择一个单选按钮，而不是你最初为他们选择一个。我担心使用这种方法，我仍然需要（event.target！==this.$refs.clickDetector）一种检查来忽略背景上的点击。请纠正我自己，我假设您在广播组中建议点击一个click.native，但是你建议在单个单选按钮上添加它，这可以防止我前面提到的问题，而且效果很好。很好，是的，它似乎在按钮和标签上都有点击。按钮上的要点很好。我担心使用这种方法，我仍然需要（event.target！==this.$refs.clickDetector）一种检查来忽略背景上的点击。请纠正我自己，我假设您在广播组中建议点击一个click.native，但是你建议在单个单选按钮上添加它，这样可以防止我前面提到的问题，而且效果很好。很好，是的，它似乎在点击按钮和标签时都会启动。