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

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

2 голосов
/ 18 июня 2019

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

<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

1 Ответ

2 голосов
/ 18 июня 2019

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

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

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

(примечание: вы также можете использовать v-модель вместо: 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:''}
      ]
    }
  },
...