vue.js - vue.js を使用したサーバー側のフォーム検証

Question

Vue.js を使用しようとしています。リクエストが正常に検証されない場合 (400)、私のサービスは ajax レスポンスを返します。応答には、入力フィールドを css 'invalid' クラスでマークするために使用したい無効なデータ フィールドの詳細が含まれています。

vue.js フォームは

 <validator name="validation">
      <form novalidate>
        <div class="form-group">
          <input 
          id="username"
          type="text" 
          class="form-control"
          placeholder="Enter your username"
          v-model="credentials.username"
          v-validate:credentials.username="['required']"

          >
        </div>
        <div class="form-group">
          <input
          id="password"
          type="password"
          class="form-control"
          placeholder="Enter your password"
          v-model="credentials.password"
          v-validate:credentials.password="['required']"
          >
        </div>
      <div class="errors">
        <validator-errors :validation="$validation"></validator-errors>
      </div>
        <button class="btn btn-primary"  @click="submit()">Access</button>
      </form>
      </validator>

また、不正なリクエスト応答にはデータが含まれています:

{
    "username": [{
        "memberNames": ["UserName"],
        "errorMessage": "Field 'User Name' can't be empty."
    }],
    "password": [{
        "memberNames": ["Password"],
        "errorMessage": "Field 'Password' can't be empty."
    }]
}