Question

我对较大形式的子组件中的无线电组有疑问，所有这些都是通过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
          }
        )
      },

非常感谢您的协助。谢谢汤姆

Answer 1

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

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

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

干杯，汤姆

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

1 个答案: