Javascript 显示多个空输入的错误vuejs vuetify

我有三个输入，分别是externalIP作为外部主机、externalHttpPort作为端口和vendor作为供应商，如果缺少其中任何一个，我想显示错误消息。但具体到名字

if (!this.externalIP || !this.externalHttpPort || !this.vendor) {

当我使用if条件时，这是可行的，但我不确定如何判断哪个输入是空的。剩下的唯一方法是在if的情况下添加3个多个

像这样的

  let error;
  error = !this.externalIP
    ? "External IP Address (or URL) is incorrect"
    : "" || !this.externalHttpPort
    ? "Port is missing" : "" || !this.vendor
    ? "Please choose camera vendor or add your camera snapshot URL." : ""
  if (!error == "") {
    this.setNotification({
      text: error,
      color: "warning",
      snackbar: true
    })
    return
  }

还有别的办法吗？此外，Eslint也会在缩进上显示警告。您可以在错误检查条件中指定错误字段变量

三个变量和表示空变量名称的
emptyField
变量示例：

if ((!a && (emptyField = "a")) || 
    (!b && (emptyField = "b")) ||
    (!c && (emptyField = "c"))) {
    alert("Field " + emptyField + " is empty...");
}

由于JS延迟地计算其参数，
emptyField=“a”
将仅在
时执行！a
为
真

请注意，惰性计算还会导致条件的计算在条件被命中后停止，因此，如果
a
为null，并且
b
为null，则警报将宣布“字段a为空…”
如果vuetify您可以使用
规则
检查输入

例如：
在
模板中
：

<v-text-field
    rules="[rules.required]"
    />

您可以将任何其他检查添加到规则数组中，并通过将其传递到规则属性将其添加到您的输入中

希望它能帮助你
 通过这种方式，您可以实现与逻辑相同的结果，而无需使用多个
if
。此外，这种方式将保持
模板
逻辑干净/易于扩展


newvue({
el:“#应用程序”，
数据：{
字段：[
{
关键字：'externalIP'，
值：“”，
validationMessage:'外部IP地址（或URL）不正确'
},
{
键：“externalHttpPort”，
值：“”，
validationMessage:'端口丢失'
},
{
关键字：“供应商”，
值：“”，
validationMessage:'请选择相机供应商或添加相机快照URL。'
}
]
},
计算：{
getError（）{
设e=''
for（让我输入此.fields）{
如果（！this.fields[i].value）{
e=此.fields[i].validationMessage
打破
}
}
返回e
}
}
})


{{getError}}
我正在使用VeeValidate处理所有的验证工作，也许您会对此感兴趣：

data() {
    return {
      rules: {
        required: (value) => !!value || 'This field is required.'
      }
    }
  },