validation - nuxt 中的验证后端获取

Question

很难从后端获取数据响应，因为前端有很多修改，这让我很难做到，

我需要如何根据前端的字段名称获取错误消息，这是来自 BACKEND 的响应

  {
        "status": false,
        "created_at": "2018-11-12 22:47:28",
        "error_message": "bad request",
        "service": "request_validation",
        "data": [
            {
                "field": "username",
                "value": "fred@",
                "message": "only contain ascii letters (a-zA-Z), ascii number characters (0-9) and single hyphens (-), and cannot begin or end with a hyphen are allowed"
            },
            {
                "field": "password",
                "value": "aaaa",
                "message": "number of characters min 8 and max 30"
            },
            {
                "field": "confirm_password",
                "value": "aaaa",
                "message": "number of characters min 8 and max 30"
            }
        ]
    }

这是我的 html，我不知道如何获取消息错误，

    <div class="mb-20">
       <form 
       id="form-register" 
       method="post"  
       @submit.prevent="onSubmit()" 
       <div class="mb-10">
          <input 
             v-model="input.username"
             type="text" 
             class="form-control border-bottom w-100" 
             placeholder="Username*" 
             name="username"
             >
          <label class="error">
             <!-- error should fetch in here -->
          </label>
       </div>
       <div class="mb-10">
          <input 
             v-model="input.email"
             type="email" 
             class="form-control border-bottom w-100" 
             placeholder="Email*" 
             name="email" 
             >
          <label class="error">
             <!-- error should fetch in here -->
          </label>
       </div>
       <div class="mb-10">
          <input 
             v-model="input.password"
             type="password" 
             class="form-control border-bottom w-100" 
             placeholder="Password*" 
             name="password"   
             ref="password">
            <label class="error">
             <!-- error should fetch in here -->
          </label> 
        </div>
       <div class="mb-10">
          <input 
             v-model="input.confirm_password"
             type="password" 
             class="form-control border-bottom w-100" 
             placeholder="Confirm Password*" 
             name="confirm_password"  
             >
          <label class="error">
             <!-- error should fetch in here -->
          </label>
       </div>

       <div class="text-center">
          <button 
             type="submit" 
             class="btn-primary border-radius-30px"
             @click="submitted=true" :disabled="submitted"
             >Register
          </button>
       </div>
       </form>
    </div>
export default {  
  layout: 'LayoutLogRegFor',
  data() {
    return {
      input: {
        username: '',
        email: '',
        password: '',
        confirm_password: '', 
      },
      submitted:false
    }
  },
  components: {
    VueRecaptcha
  },
  computed: mapGetters({
    user: 'user/user'
  }),
  getField(field){
    // get message

  },
  methods: {
    ...mapActions({
      postRegister: 'user/postRegister'
    }),
    onSubmit() { 
      await this.postRegister(this.input)
      if (this.user.status === true && this.user.data.active == true) { 
        this.$router.push('/dashboard')
      } else if (this.user.status === true && this.user.data.active == false) { 
        this.$router.push('/confirmation')
      }
    }
  },
  head() {
    return {
      bodyAttrs: {
        class: 'register-section'
      }
    }
  }
}

我的问题是如何在 html 中获取 nuxtjs 中的每个字段

标签： validationvue.js