将 vuelidate 与 vuetify 一起使用

Question

我正在使用 vuelidate 和 vuetify。我有一些使用相同错误消息处理程序的 v-text-fields。

在显示错误消息的处理函数中，我想获取导致错误的字段文本，以便仅使用处理函数，而不是创建许多类似的函数。

有办法吗？

<v-text-field
class="purple-input"
label="Data"
type="date"
v-model="preco_proced.data_valor1"
:error-messages="dataValorErrors"
persistent-hint
required
></v-text-field>

<v-text-field
class="purple-input"
label="Data"
type="date"
v-model="preco_proced.data_valor2"
:error-messages="dataValorErrors"
persistent-hint
required
></v-text-field>

//error-messages
dataValorErrors() {
      const errors = [];
      //here I need the correct field:data_valor1, data_valor2 .....  
      if (!this.$v.preco_proced.data_valor??????.$dirty) return errors;
      !this.$v.preco_proced.data_valor???????.required &&
        errors.push("Data é obrigatório");
      return errors;
},

Answer 1

是的，我们可以做到。

假设我们要验证 firstName 和 email 并且 validations 选项设置如下：

validations: {
  firstName: { required },
  email: { required, email },
},

并且在模板中我们需要更新 v-text-field 如：

<v-text-field 
  label="First name*" 
  v-model.trim="firstName" 
  required 
  :error-messages="getErrors('firstName', $v.firstName)" 
  @blur="$v.firstName.$touch()">
</v-text-field>

<v-text-field 
  label="Email*" 
  required 
  v-model.trim="email" 
  :error-messages="getErrors('email', $v.email)" 
  @blur="$v.email.$touch()">
</v-text-field>

现在我们只需要为 js 代码添加 getErrors 方法，例如：

methods: {
  validate() {
    this.$v.$touch();
    if (this.$v.$invalid) {
      return;
    }
  },
  getErrors(name, model) {
    const errors = [];
    if (!model.$dirty) return errors;
    switch (name) {
      case "firstName":
        !model.required && errors.push("First name is required.");
        break;
      case "email":
        !model.email && errors.push("Must be valid e-mail");
        !model.required && errors.push("E-mail is required");
        break;
      default:
        break;
    }
    return errors;
  }
}

您还可以根据需要继续为其他文本字段添加多个 switch case。我希望这个演示示例对您有所帮助。

演示：

Vue.use(window.vuelidate.default)
const { required, email } = window.validators

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  validations: {
    name: { required },
    email: { required, email },
  },
  data() {
    return {
      name: '',
      email: '',
    }
  },
  methods: {
    validate() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        return;
      }
    },
    getErrors(name, model) {
      const errors = [];
      if (!model.$dirty) return errors;
      switch (name) {
        case "name":
          !model.required && errors.push("First name is required.");
          break;
        case "email":
          !model.email && errors.push("Must be valid e-mail");
          !model.required && errors.push("E-mail is required");
          break;
        default:
          break;
      }
      return errors;
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.5/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.5/dist/validators.min.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <form>
          <v-text-field v-model="name" :error-messages="getErrors('name', $v.name)" :counter="10" label="Name" required @input="$v.name.$touch()" @blur="$v.name.$touch()"></v-text-field>
          <v-text-field v-model="email" :error-messages="getErrors('email', $v.email)" label="E-mail" required @input="$v.email.$touch()" @blur="$v.email.$touch()"></v-text-field>
          <v-btn class="mr-4" @click="validate">submit</v-btn>
        </form>
      </v-container>
    </v-main>
  </v-app>
</div>

将 vuelidate 与 vuetify 一起使用

Using vuelidate with vuetify

vue.js

vuetify.js

vuelidate