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."
    }]
}