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>

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

实施例

如果电子邮件为空，则会捕获＆＃34; email_is_blank＆＃34;带有errors数组的消息。但是如何使用Vue.js和Vuetify将该消息显示在表单中？

Answer 1

Codepen example

一种方法是使用值和错误字符串创建对象：

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

然后将模型绑定到对象value，并将错误消息prop绑定到对象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
})

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

问题

实施例

1 个答案: