Vue.js 无法使用 vee-validate

问题描述

我正在处理具有自定义迭代次数的多步表单（使用 vue-form-wizard）。每个步骤都包含相同的表单，但是为了从一个步骤到另一个步骤，我们需要一次验证每个表单，我的应用程序可以使用添加新表单的特定按钮添加步骤。问题是验证方法不起作用，我无法一步到另一步。

<form-wizard shape="tab"
                   @on-complete="wizardComplete"
                   error-color="#EB5E28"
                   color="#66615B">
        <tab-content v-for="(lot,index) in arr"
        :index="index" :key="index"
        :before-change="validateSteps"
                     icon="">
          <div>{{index + 1}}</div>
          <form ref="lotsiter + index">
          
                 <input v-model="lot.lots_denomination" type="text"
                 v-validate="modelValidations.lots_denomination"
                 class="form-control">
                 <small class="text-danger" v-show="lots_denomination.invalid">
                   {{ getError('lots_denomination') }}
                 </small>

                <input v-model="lot.lots_type" type="text"
                v-validate="modelValidations.lots_type"
                class="form-control">
                <small class="text-danger" v-show="lots_type.invalid">
                  {{ getError('lots_type') }}
                </small>
          </form>
          
          <div class="text-center">
          <button @click="addEndItem()" class="btn btn-info btn-fill btn-wd btn-next"> Ajouter lot</button>
          </div>
        </tab-content>
        <button slot="prev" class="btn btn-default btn-fill btn-wd btn-back">Back</button>
        <button slot="next" class="btn btn-info btn-fill btn-wd btn-next">Next</button>
        <button slot="finish" @click.prevent="saveLots" class="btn btn-info btn-fill btn-wd">Finish</button>
        
      </form-wizard>

这是我的 vee-validate 默认方法

// veevalidate
  getError (fieldName) {
    return this.errors.first(fieldName)
  },validate () {
    return this.$validator.validateAll()
  }

这是检查 $refs 的 validateSteps() 方法

validateSteps () {
    let formsArray = this.$refs['lotsiter + index']
    console.log(formsArray)
    return formsArray.validate()
  },

当我在 :before-change 上调用这个方法时，我得到了这个错误：

[Vue warn]: Error in v-on handler: "TypeError: formsArray.validate is not a function"

PS：我尝试在更改前直接调用 validate() ，验证进行但下一个按钮不起作用。

你能帮我解决这个问题吗，提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）