vue.js - 使用 vue.js 和 vuetify 进行服务器端表单验证

Question

我看到很多有关使用 Vuetify 进行客户端验证的文档，但发现很难找到有关 vuetify 和 vue 的服务器端验证消息的文档。

问题

我有这个组件:

<template>
  <v-container>
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-card-text>
            <v-container>
              <h3>Register Now</h3>
              <form v-on:submit.prevent="onSubmit">
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="email"
                      label="Email"
                      type="email"
                      ref="user_email"
                      id="email">
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="password"
                      label="Password"
                      type="password"
                      ref="user_password"
                      id="password">
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-btn type="submit">Sign Up</v-btn>
                  </v-flex>
                </v-layout>
              </form>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import axios from 'axios'
  import router from 'vue-router'

  export default {
    data() {
      return {
        errors: [],
      }
    },
    methods: {
      onSubmit: function () {
        axios.post('/users', {
          user: {
            email: this.$refs.user_email.value,
            password: this.$refs.user_password.value
          }
        })
        .then(response => {
        })
        .catch(error => {
          this.errors.push(error.response.data.errors);
        })
      }
    }
  }
</script>

它基本上收集从服务器返回的错误。如果出现问题，这些是我想显示的错误消息。

示例:

如果电子邮件为空，这将捕获带有 errors 数组的“email_is_blank”消息。但是我怎样才能使用 Vue.js 和 Vuetify 获取该消息并以表单形式显示它呢？

Answer 1

Codepen example

其中一种方法是创建具有值和错误字符串的对象:

data: () => ({
  email: {
    value: '',
    error: ''
  }
})

然后将模型绑定(bind)到对象 value，并将 error-messages prop 绑定(bind)到对象 error:

<v-text-field
  v-model="email.value"
  label="email"
  :error-messages="email.error"
></v-text-field>

在您的响应中，只需更改 error 的值:

...
.then(response => {
  this.email.error = response.errors.email // or whatever the path is to the relevant error message from the server
})