Question

在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是什么，但我不确定如何更改。

Answer 1

您可以创建一个自定义验证方法，例如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 },
    numberChildren: { 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;
}

验证计算属性

1 个答案: