时间戳

首页 > 解决方案 > validateAll 不适用于 v-for 生成的输入

vue.js - 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.jsvuejs2vuetify.jsvee-validate

解决方案

我认为，您需要将表单数据存储在某个地方，以便验证可以进行。

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

我所做的主要更改是将动态生成的输入放入 data() 中，并使用它在 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:''}
      ]
    }
  },

推荐阅读