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

Question

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

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

CCD_ 2是可以动态添加的字符串的数组。对于每个这样的端口，我想用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
},

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

Answer 1

好的，我找到了一个解决方案：以下是发生这种情况的关键原因，我引用自己的话：

它们在v-for循环中

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