Vuelidate общая логика проверки - PullRequest
Новая
       20

Vuelidate общая логика проверки

0 голосов
/ 02 октября 2018

В настоящее время я изучаю разработку javascript и в настоящее время занимаюсь персональным проектом с использованием VueJS, Vuetify и Vuelidate.

У меня простой вопрос.

У меня есть два текстовых поля, как показано ниже. 

  <v-layout wrap>
    <v-flex>
      <v-text-field
        label="First Name"
        maxlength="20"
        v-model.trim="firstName"
        :error-messages="firstNameErrors"
        @input="$v.firstName.$touch()"
        @blur="$v.firstName.$touch()"
      ></v-text-field>
    </v-flex>
    <v-flex>
      <v-text-field
        label="Last Name"
        v-model.trim="lastName"
        maxlength="20"
        :error-messages="lastNameErrors"
        @input="$v.lastName.$touch()"
        @blur="$v.lastName.$touch()"
      ></v-text-field>
    </v-flex>
  </v-layout>

У меня есть vuelidate, записанный в вычисляемом хуке, как показано ниже. 

  computed: {
    firstNameErrors () {
      const errors = []
      if (!this.$v.firstName.$dirty) return errors
      !this.$v.firstName.required && errors.push('First Name is required')
      return errors
    },
    lastNameErrors () {
      const errors = []
      if (!this.$v.lastName.$dirty) return errors
      !this.$v.lastName.required && errors.push('Last Name is required')
      return errors
    }

Код работает нормально и делает то, что должен делать, генерировать ошибки проверки, «требуется»в моем случае.

Мой вопрос заключается в том, что я хотел бы включить обе функции ошибок проверки "firstNameErrors" и "lastNameErrors" в одну функцию с именем "requiredErrors", а не в две отдельные функции.

Код ручки: https://codepen.io/pen/jebLgM

Любая помощь очень ценится.

Спасибо.

1 Ответ

0 голосов
/ 02 октября 2018

Я не следую вашей логике, но, принимая ваш запрос буквально, это может выглядеть так: 

 <v-layout wrap>
    <v-flex>
      <v-text-field
        label="First Name"
        maxlength="20"
        v-model.trim="firstName"
        :error-messages="requiredErrors"
        @input="$v.firstName.$touch()"
        @blur="$v.firstName.$touch()"
      ></v-text-field>
    </v-flex>
    <v-flex>
      <v-text-field
        label="Last Name"
        v-model.trim="lastName"
        maxlength="20"
        :error-messages="requiredErrors"
        @input="$v.lastName.$touch()"
        @blur="$v.lastName.$touch()"
      ></v-text-field>
    </v-flex>
  </v-layout>

  computed: {
    requiredErrors () {
      const errors = []
      this.$v.firstName.$dirty 
        && !this.$v.firstName.required 
        && errors.push('First Name is required')
      this.$v.lastName.$dirty
        && !this.$v.lastName.required 
        && errors.push('Last Name is required')
      return errors
    }

ОБНОВЛЕНИЕ

Да, именно поэтому я сказал, что я не следую вашей логике(имея одинаковое сообщение для обоих входов).Вероятно, вы можете достичь того, что хотите, * * * * * * * * * * bind - несколько раз используя вашу функцию с другим 1-м аргументом, но функция больше не может быть методом вашего компонента (потому что они уже связаны с Vue).

Может быть, что-то вроде этого: 

<v-text-field
    label="First Name"
    maxlength="20"
    v-model.trim="firstName"
    :rules="requiredErrorsFirstName"
    @input="$v.firstName.$touch()"
    @blur="$v.firstName.$touch()"
  ></v-text-field>

<v-text-field
    label="Last Name"
    v-model.trim="lastName"
    maxlength="20"
    :rules="requiredErrorsLastName"
    @input="$v.lastName.$touch()"
    @blur="$v.lastName.$touch()"
  ></v-text-field>

computed:
{
  requiredErrorsFirstName ()
  {
    return [requiredErrors.bind(this,'firstName')];
  },
  requiredErrorsLastName ()
  {
    return [requiredErrors.bind(this,'lastName')];
  }
}

function requiredErrors(fieldName, fieldValue)
{
  switch(fieldName)
  {
    case 'firstName':
      return this.$v[fieldName].$dirty 
            && !this.$v[fieldName].required 
            ? 'First Name is required' : true;
    case 'lastName':
      return this.$v[fieldName].$dirty 
            && !this.$v[fieldName].required 
            ? 'Last Name is required' : true;   
  }
}

Я лично считаю, что это некрасиво и предпочел бы иметь отдельное вычисляемое свойство или метод для каждого поля.

...