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

Question

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

这是我的 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>

此外，您应该养成始终定义键的习惯

fiddle: https://jsfiddle.net/m67d8f4x/67/

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

Multiple Text Field Repeater with VueJS Vee Validate

validation

repeater

vue.js

vee-validate