validateAll не работает с входными данными, сгенерированными v-for

У меня есть форма, в которой входы добавляются динамически с помощью цикла v-for. Каждое поле должно быть проверено, и прежде чем пользователь отправит форму, оно должно быть проверено независимо от того, является ли оно действительным или нет. Проблема в том, что this.$validator.validateAll() всегда возвращает true, даже если входные данные неверны. Что я делаю неправильно?

<div id="app">
  <v-app id="inspire">
    <v-flex md4 offset-md4>
  <form data-vv-scope="photoForm">
    <v-text-field v-for="index in 5" 
                  :key="index" 
                  :label="'photo' + index"
                  :error-messages="errors.collect('photoForm.photoName' + index)" 
                  v-validate="'max:10'"
                  :data-vv-name="'photoForm.photoName' + index"
                  color="purple" autocomplete="on"
                  counter="10"    >  
    </v-text-field>
  </form>
      <p>Is valid form? {{ validationResult }}</p>
      </v-flex>
  <v-btn @click="validate" color="purple" dark>
    validate
  </v-btn>
    </v-app>
</div>

Vue.use(VeeValidate);
new Vue({
  el: "#app",  
  data() {
    return {
      validationResult: ''
    }
  },
  methods: {
    validate() {
      this.$validator.validateAll('photoForm').then(result => {
        this.validationResult = result
      })
    }    
  }
});

И codepen, где я воспроизвел проблему: https://codepen.io/anon/pen/jjrJdE


vue.js vuetify.js vuejs2 vee-validate
person kojot    schedule 18.06.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно где-то хранить данные формы, чтобы при проверке было над чем работать, я полагаю.

См. https://codepen.io/cwg999/pen/MMjWNj?editors=1011

Основные изменения, которые я сделал, заключались в том, чтобы поместить ваши динамически сгенерированные входные данные в ваши данные () и использовать их для ссылки на них в цикле for.

(примечание: вы также можете использовать v-model вместо :value/@input)

<v-text-field v-for="o,i in photoForm" 
              :key="i" 
              :label="o.label+ ' ' + (i+1)"
              :error-messages="errors.collect('photoForm.photoName' + i)" 
              v-validate="'max:10'"
              :name="'photoName' + i"
              :value=o.value
              @input="o.value = $event"
              color="purple" autocomplete="on"
              counter="10"    >  
</v-text-field>




data() {
    return {
      validationResult: '',
      photoForm:[
        {label:'Photo',value:''},
        {label:'Photo',value:''}
      ]
    }
  },
person Cody Ｇ    schedule 18.06.2019
comment
Ты прав. Это работает, даже если я динамически добавляю другой ввод codepen.io/anon/pen/QXKNMQ - person kojot; 18.06.2019