我看到了很多有关使用 Vuetify 进行客户端验证的文档,但发现很难找到有关 vuetify 和 vue 的服务器端验证消息的文档。
PROBLEM
我有这个组件:
<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>
它主要收集从服务器返回的错误。这些是我想在出现问题时显示的错误消息。
EXAMPLE:
如果电子邮件为空,这将捕获“email_is_blank”消息errors
大批。但是我如何使用 Vue.js 和 Vuetify 获取该消息并将其显示在表单中?
Codepen 示例 https://codepen.io/traxo/pen/PgxarL
一种方法是创建带有值和错误字符串的对象:
data: () => ({
email: {
value: '',
error: ''
}
})
然后将您的模型绑定到对象value
,以及反对的错误消息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
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)