我对较大形式的子组件中的无线电组有疑问,所有这些都是通过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
}
)
},
非常感谢您的协助。 谢谢汤姆
答案 0 :(得分:0)
解决方案是睁开双眼阅读文档,并发现单选按钮响应change
事件。
因此,更改v-radio-group属性以读取以下内容解决了我的问题:
<v-radio-group
label="Risk type"
v-model="$v.form.sourceid.$model"
:mandatory="false"
@change="submit"
>
干杯,汤姆