时间戳

首页 > 解决方案 > 检测 Vuetify 电台重选？

javascript - 检测 Vuetify 电台重选？

问题描述

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

理想情况下，我要做的是：

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

我想出的一种解决方法是向包装 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

有一个更好的方法吗？

标签： javascriptvue.jsvuetify.js

解决方案

您应该能够定位原生点击事件，例如：

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

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

推荐阅读