时间戳

首页 > 解决方案 > Vuelidate 自定义验证在 $each 中的每个元素上显示错误

vue.js - Vuelidate 自定义验证在 $each 中的每个元素上显示错误

问题描述

我有一个formData具有以下结构的对象：

{
  name: '',
  defaultPort: 1000,
  protocolPorts: [{
    manual_ports: []
  }]
}

manual_ports是一个可以动态添加的字符串数组。对于每个这样的端口，我想用 Vuelidate 进行一些验证。 

formData: {
    name: { required, maxLength: maxLength(64) },
    protocolPorts: {
      $each: {
        manual_ports: {
          $each: {
            required,
            numeric,
            maxLength: maxLength(5),
            between: between(1, (Math.pow(2, 16) - 1)),
            cantBeginWithZero,
            cantBeDuplicate
          }
        }
      }
    }
  }

最后一个验证是cantBeDuplicate- 我想检查当前编辑的端口是否与任何其他端口或defaultPort. 问题是它目前可以工作，但是它在每个端口文本字段下都显示错误，而不仅仅是在当前正在编辑的那个之后。有没有办法让它发生？

到目前为止我试过这个： 

function cantBeDuplicate (val) {

  if (val) {
    let ports = [...this.currentProtocol.manual_ports];
    ports.splice(this.currentPortIndex, 1);
    return this.currentProtocol.manual_ports.length > 1 ?
      !ports.includes(val) :
      +this.currentProtocol.manual_ports[this.currentPortIndex] === +this.currentProtocol['default_port'] || true;
  } else {
    return true;
  }
}

...和这个： 

return val ?
  (!_.initial(this.currentProtocol.manual_ports).includes(val) && +this.currentProtocol['default_port'] !== +val) : true;

这就是我的文本字段的定义方式（它们在 v-for 循环中）：

<v-text-field
  v-model="protocol['manual_ports'][index]"
  :error-messages="portsErrors"
  label="Port"
  height="30"
  single-line
  flat
  dense
  required
  @click="setCurrents(protocol, index)"
  @blur="$v.formData.protocolPorts.$each[pi]['manual_ports'].$each[index].$touch()"
  @input="$v.formData.protocolPorts.$each[pi]['manual_ports'].$each[index].$touch()" />

这是portsError计算的属性： 

portsErrors() {
    const errors = [];
    if ( this.currentProtocol) {
      const protocolIndex = findIndex(this.formData.protocolPorts, p => p.id === this.currentProtocol.id)

      if (!this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].$dirty) {
        return errors;
      }
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].numeric && errors.push('Digits only')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].maxLength && errors.push('Max 5 digits')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].between && errors.push('Range: 1 - 65535')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].cantBeginWithZero && errors.push('No leading 0')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].cantBeDuplicate && errors.push('No duplicates')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].required && errors.push('Required')
    }
    return errors
  },

是否可以仅在当前编辑的端口下方显示错误消息？

标签： vue.jsvuetify.jsvuelidate

解决方案

好的，我找到了解决方案：这是它发生的关键原因，我引用自己的话：

它们在 v-for 循环中

由于v-text-field在 v-for 循环内 - 当然这个循环中的每个元素都将具有相同的验证。解决方案是将文本字段包装在包装器组件中，传递必要的道具并仅在组件内部对道具运行验证，同时在父组件中发出结果并处理它。

推荐阅读