在Vue组件中，我有3个数字字段，如下所示：
data() {
return {
numberAdults: 0,numberChildren: 0,numberInfants: 0,}
以及计算所得的属性：
computed: {
numberPersons() {
return this.numberAdults + this.numberChildren + this.numberInfants
},我想验证是否设置了至少一个人（至少一个成人或一个孩子或一个婴儿），但是我无法使其工作。这是验证规则：
numberPersons: {
required,minValue: minValue(1),},如果我用三个字段之一更改numberPersons，则对该字段的验证有效。我认为Vuelidate不知道numberPersons是什么，但我不确定如何更改。
您可以创建一个自定义验证方法，例如strcpy(temp->name,name);
，该方法可以简单地验证您的计算属性minNumberPersons：
this.numberPersons然后，您可以将这些规则应用于不同的模型：
const minNumberPersons = (value,vm) => {
return vm.numberPersons >= 1;
};
UX建议，完全可选：顺带一提，由于您将同时验证3个字段，因此使用validations: {
numberAdults: { numberPersons },numberChildren: { numberPersons },numberInfants: { numberPersons }
}
方法可以确保更改其中任何三个字段时，所有3个字段的脏状态均设置为$v.<field>.$touch()。您只需在模板中进行true绑定，然后将其添加到您的方法中即可：
@input="onInput"请参阅此处的概念证明。我改编自demo JSFiddle used by the Vuelidate repository。
onInput() {
this.$v.numberAdults.$touch();
this.$v.numberChildren.$touch();
this.$v.numberInfants.$touch();
},Vue.use(window.vuelidate.default);
const numberPersons = (value,vm) => {
return vm.numberPersons >= 1;
};
new Vue({
el: "#app",data: {
numberAdults: 0,numberChildren: 0,numberInfants: 0,},validations: {
numberAdults: { numberPersons },numberInfants: { numberPersons }
},computed: {
numberPersons() {
// Converting each to a number using the unary + operator,in case user inputs empty string
return (+this.numberAdults) + (+this.numberChildren) + (+this.numberInfants);
},methods: {
status(validation) {
return {
error: validation.$error,dirty: validation.$dirty
}
},// Optional: force validation of all number inputs when any one is changed
onInput() {
this.$v.numberAdults.$touch();
this.$v.numberChildren.$touch();
this.$v.numberInfants.$touch();
},}
})body {
background: #fff;
}
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.dirty {
border-color: #5A5;
background: #EFE;
}
.dirty:focus {
outline-color: #8E8;
}
.error {
border-color: red;
background: #FDD;
}
.error:focus {
outline-color: #F99;
}