带有 VueJS Vee Validate 的多个文本字段重复器

Question

我有一个带有 veevalidate 的多个文本字段中继器。问题是，当第一个字段有错误时，另一个字段会受到影响。并且，在添加新字段时将继承该错误。

->https://prnt.sc/h75byu

这是我的html

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">

    <div class="repeater" v-for="(field, index) in fieldsRepeater">
      <div class="field" :class="{error: errors.has('fname')}">
        <label>First Name</label>
        <input type="text" name="fname" placeholder="First name" v-validate="'required'" v-model="fname">
        <span class="error" v-if="errors.has('fname')">{{errors.first('fname')}}</span>
      </div>

      <div class="field" :class="{error: errors.has('lname')}">
        <label>Last Name</label>
        <input type="text" name="lname" placeholder="Last name" v-validate="'required'" v-model="lname">
        <span class="error" v-if="errors.has('lname')">{{errors.first('lname')}}</span>
      </div>

    </div>
  <button type="button" class="ui button" @click="AddField">Add Field</button>

  <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

这是我的 vuejs

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      fieldsRepeater: [{
        fname: '',
        lname: '',
      }],
    }
  },
  methods: {
    AddField() {
      this.fieldsRepeater.push({
        fname: '',
        lname: '',
      });
    },
    onSubmit() {
      this.$validator.validateAll()

      if (!this.errors.any()) {
        alert('submit')
      }
    }
  }
})

这是我的 jsfiddle -> https://jsfiddle.net/m67d8f4x/66/

我们如何对每组字段应用不同的验证？

我该如何解决这个问题？

Answer 1

你们的名字一样，所以 veeValidate 插件无法区分它们。

试试下面的代码。请注意，名称是使用:name="'fname'+index" 动态添加并使用errors.has('lname'+index) 引用的

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">

    <div class="repeater" v-for="(field, index) in fieldsRepeater" :key="index">
      <div class="field" :class="{error: errors.has('fname'+index)}">
        <label>First Name</label>
        <input type="text" :name="'fname'+index" placeholder="First name" v-validate="'required'" v-model="field.fname">
        <span class="error" v-if="errors.has('fname'+index)">{{errors.first('fname'+index)}}</span>
      </div>

      <div class="field" :class="{error: errors.has('lname'+index)}">
        <label>Last Name</label>
        <input type="text" :name="'lname'+index" placeholder="Last name" v-validate="'required'" v-model="field.lname">
        <span class="error" v-if="errors.has('lname'+index)">{{errors.first('lname'+index)}}</span>
      </div>

    </div>
  <button type="button" class="ui button" @click="AddField">Add Field</button>

  <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

另外，你应该养成总是定义键的习惯

小提琴：https://jsfiddle.net/m67d8f4x/67/