Vuelidate глубоко вложенный массив строк - PullRequest
Новая
       33

Vuelidate глубоко вложенный массив строк

1 голос
/ 19 февраля 2020

У меня есть данные со следующей структурой в моем файле Vue: 

data() {
  return {
    formData: {
      name: 'foo',
      objects: [
        {id: 0, name: 'a', props: []},
        {id: 1, name: 'b', props: ['2', '23']},
        {id: 2, name: 'c', props: ['44']},
        {id: 3, name: 'd', props: []}
      ]
    },
    currentObj = null,
    currentPropIndex = null
  }
}

Число объектов в массиве objects - это Dynami c, как и массив props, где Строковые значения могут быть добавлены и удалены. Мне нужно использовать Vuelidate для проверки каждого значения массива props в каждом объекте при его изменении. Итак, я попробовал это: 

validations: {
  formData: {
    name: { required, maxLength: maxLength(64) },
    objects: {
      props: {
        $each: {
          required, numeric, maxLength: maxLength(5)
        }
      }
    }
  }
},

Вычислено: 

propsErrors() {
    const errors = [];
    if ( this.currentObj) {
      // const objIndex = _.findIndex(this.formData.objects, o => o.id === this.currentObj.id)
      if (!this.$v.formData.objects['props'][this.currentPropIndex].$dirty) {
        return errors;
      }
      !this.$v.formData.objects['props'][this.currentPropIndex].maxLength && errors.push('Max 5 digits')
      !this.$v.formData.objects['props'][this.currentPropIndex].required && errors.push('Required')
      !this.$v.formData.objects['props'][this.currentPropIndex].numeric && errors.push('Digits only')
    }
    return errors
  },

И мое текстовое поле Vuetify: 

<v-text-field single-line flat dense required
  v-model="object.props[index]"
  :error-messages="propsErrors"
  label="Prop"
  height="30"
  @click="setCurrents(protocol, index)"
  @blur="$v.formData.protocolPorts['manual_ports'][index].$touch()"
  @input="$v.formData.protocolPorts['manual_ports'][index].$touch()" />

И setCurrents только устанавливает текущий отредактированный объект и индекс поддержки: 

setCurrents (protocol, index) {
    this.currentObj = protocol;
    this.currentPropIndex = index;
  }

После того, как я проверил страницу и щелкнул по текстовому полю, я получил эту ошибку: Error in render: "TypeError: Cannot read property 'props' of undefined"

Я попытался изменить propsErrors (objIndex в настоящее время закомментировано в приведенном выше коде) 

this.$v.formData.objects[objIndex]['props'][index].maxLength && errors.push('Max 5 digits')

Текстовое поле (oi обозначает индекс объекта): 

@input="$v.formData.objects[oi].props[index].$touch()"

И проверки: 

validations: {
  formData: {
    name: { required, maxLength: maxLength(64) },
    objects: {
      required,
      $each: {
        props: {
          $each: {
            required, numeric, maxLength: maxLength(5)
          }
        }
      }
    }
  }
},

Все еще продолжаю получать ошибки. Есть идеи, пожалуйста?

1 Ответ

0 голосов
/ 19 февраля 2020

Я никогда не использовал Vuelidate, но обнаружил, что этот пример весьма полезен и в достаточной степени похож на то, что вы пытаетесь сделать https://vuelidate.js.org/#sub -collections-validation

Ваши данные в Vue экземпляр должен быть изменен с 

currentObj = null,
currentPropIndex = null

на 

currentObj: null,
currentPropIndex: null
...