Question

我有一种形式，其中输入是通过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

Answer 1

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

请参见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:''}
      ]
    }
  },

validateAll不适用于v-for生成的输入

1 个答案: