选择单选按钮不会触发 @input答案

【问题标题】：Selecting a radio button does not trigger @input选择单选按钮不会触发 @input
【发布时间】：2019-09-10 20:45:34
【问题描述】：

我在较大表单的子组件中遇到了无线电组的问题，所有这些都通过 Vuetify 框架呈现。

无论何时选择任何选项，我都无法让无线电组触发 @input 事件。当我更改 Results 文本区域中的值时，将发出选定的单选值。

如果我放弃 Vuelidate 的参与并将广播组中的模型设置为 v-model="form.sourceid"，问题仍然存在。

我的代码是：

<template>
    <form @input="submit" class="form">
      <v-card-text>
        <v-radio-group
            label="Risk type"
            :mandatory="false"
            v-model="$v.form.sourceid.$model"
        >
          <v-radio
              v-for="risk in risks"
              :key="risk.value"
              :label="risk.label"
              :value="risk.riskId"
              :checked="risk.riskId == form.sourceid"
              color="teal"
          ></v-radio>
        </v-radio-group>
        <v-text-field
            v-model.trim="form.results"
            type="text"
            label="Results"
            box
        ></v-text-field>
      </v-card-text>
    </form>
</template>

<script>
  import {required} from 'vuelidate/lib/validators'

  const FORM_TEMPLATE = {
    sourceid: null,
    results: null,
  }
  export default {
    props: {
      wizardData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: {...FORM_TEMPLATE, ...this.wizardData},
        risks: [
          { label: 'Soil',riskId: '1'},
          { label: 'Water',riskId: '2'},
          { label: 'Agrichemicals',riskId: '3'},
        ]
      }
    },
    validations: {
      form: {
        sourceid: {
          required
        },

      }
    },
    methods: {
      submit () {
        this.$emit('update',
          { data: this.form,
            valid: !this.$v.$invalid
          }
        )
      },
    }
  }
</script>

wizardData 使用“干净表单”时的内容是：

{
"sourceid": null,
"results": null
}

我的submit方法是：

submit () {
        this.$emit('update',
          { data: this.form,
            valid: !this.$v.$invalid  //this line removed if testing without Vuelidate
          }
        )
      },

非常感谢任何帮助。谢谢，汤姆

【问题讨论】：

标签： vue.js

【解决方案1】：

解决方案是睁大眼睛阅读文档，发现单选按钮响应change 事件。

因此，更改 v-radio-group 属性以读取以下内容解决了我的问题：

<v-radio-group
      label="Risk type"
      v-model="$v.form.sourceid.$model"
      :mandatory="false"
      @change="submit"
>

干杯，汤姆

【讨论】：