javascript - 在 Nuxt 中嵌套 for 循环并根据值显示错误

Question

我有一个需要 3 个输入代码的表单。首先，我的项目检查代码是否符合正则表达式验证，然后发送到后端。我的英雄对响应有一个问题，我的问题是过滤特定输入代码的错误消息。如果输入失败，我的目标是显示像 {{this.form.code1.error }} 这样的准确错误。我有各种可能的回应，我试图匹配。

我的（e）对象看起来像这样

    {
        "message": "code not found",
        "path": [
            "validate"
        ],
        "extensions": {
            "code": "CODE_NOT_FOUND",
            "value": "VBJCBGB6JJ"
        }
    },
    {
        "message": "code not found",
        "path": [
            "validate"
        ],
        "extensions": {
            "code": "CODE_NOT_FOUND",
            "value": "HH6F3JPMWF"
        }
    },
    {
        "message": "code not found",
        "path": [
            "validate"
        ],
        "extensions": {
            "code": "CODE_NOT_FOUND",
            "value": "4FHRXE2GGN"
        }
    }
]

我正在尝试使用此函数剖析和映射值

  showErrors(e) {
      let valid = true
      console.log(e)
      e.forEach((e) => {
        console.log('inside for each')
        if (e.message === 'code not found') {
          this.form.code1.valid = false
          valid = false
          this.form.code1.error =
            'Invalid code. Try again or see FAQ’s for help.'
          } 
        if (e.message === 'code used') {
          this.form.code2.valid = false
          valid = false
          this.form.code2.error = 'Code has already been redeemed.'
        } else {
          this.form.code1.valid = true
          this.form.code1.error = ''
        }
        return valid
      })

这是我的参考模板

        .form-wrapper
          .row
            .input-container
              input(type="text" name="Code 1" placeholder="Code 1" v-model="form.code1.value" :class="{ error: form.code1.valid === false}" minlength="10").check
              //- .error-msg(v-if="form.code1.valid === false") {{form.code1.error}}
            .input-container
              input(type="text" name="Code 2" placeholder="Code 2" v-model="form.code2.value" :class="{ error: form.code2.valid === false}" minlength="10").check
              //- .error-msg(v-if="form.code2.valid === false") {{form.code2.error}}
            .input-container
              input(type="text" name="Code 3" placeholder="Code 3" v-model="form.code3.value" :class="{ error: form.code3.valid === false}" minlength="10").check
              //- .error-msg(v-if="form.code3.valid === false") {{form.code3.error}}
          .row
            .select-container
              select(v-model="form.retailer.value" :class="{ selected: form.retailer.value !== '', error: form.retailer.valid === false }")#select
                option(value="" disabled selected) Where did you shop? 
                option(v-for="option in stores") {{ option.text }}
              .error-msg(v-if="form.retailer.valid === false") {{form.retailer.error}}
              .error-msg(v-if="form.code1.valid === false") {{form.code1.error}}
              .error-msg(v-if="form.code2.valid === false") {{form.code2.error}}
            .cta.bg-blue-dark.inline-block.cursor-pointer.disabled#submit(@click="onSubmit" :disabled="!valid" class='hover:bg-blue-500 md:mt-7' type='submit') {{ buttonText }}

我觉得我在这里错过了一个联系。我希望能够显示“代码已兑换”或“无效代码”或“代码未知”或任何返回的错误但与该代码条目相关。提前致谢！

标签： javascriptvue.jsfor-loopobjectnuxt.js