时间戳

首页 > 解决方案 > 选择单选按钮不会触发 @input

vue.js - 选择单选按钮不会触发 @input

问题描述

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

I cannot get the radio-group to trigger an @input event whenever any of its options are selected. 当我更改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

解决方案

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

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

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

干杯，汤姆

推荐阅读