Question

我有一个表单，用户可以在其中添加其他行。每行包含一些输入字段。我想彼此独立地验证每一行，并且每行仅显示一个错误消息。

这是我循环行并向每行添加范围的方法

<div v-for="(item, index) in sizes" :key='index' :data-vv-scope="`row${index}`">
  // error message
  <p v-show="errors.has('sizesErrorMsg')">{{ errors.first('sizesErrorMsg') }}</p>
  //start of inputfields
  <div>
    <input type="text" name="prefix" v-model="item.prefix" v-validate="{ required: true }" :class="{'error': errors.has('prefix')}">
  </div>
  <div>
    <input class="checkbox" type="checkbox" id="ratio">
  </div>
  <div>
    <input type="text" name="width" v-model="item.width" v-validate="{ required: true }" :class="{'error': errors.has('width')}">
  </div>
    ...
    ...
<div>
<button @click.prevent="addSize">Add<button>
<button @click="save">Save</button>

提交后，我再次遍历所有行，并使用带有范围的validateAll

for (let i = 0; i < sizes.length; i++) {
  this.$validator.validateAll(`row${i}`).then((result) => {
    if (result) {
      // no error
    } else {
      const message = this.$validator.dictionary.getMessage('de', 'sizesErrorMsg');
      this.errors.add({
        scope: null,
        field: 'sizesErrorMsg',
        msg: message
      });
    }
  });
}

但是，如果使用示波器，则不会引发任何错误。我在做什么错了？

欢呼声，格雷戈尔

vee-validate具有多个范围和一个提交按钮

0 个答案: