在laravel 5.8 / vue2.5 / vuex / axios应用程序中,我使用veeValidate和vee-validate-laravel在窗体上显示laravel的错误,并且 一个非唯一电子邮件的验证错误无法正确呈现的问题: 我是我的表格:
<div class="form-row mb-3">
<label class="col-12 col-sm-4 col-form-label" for="email">Email</label>
<div class="col-12 col-sm-8">
<input
type="text"
:class="{ 'form-control':true, 'text-danger': vueErrorsList.has('email') }"
id="email"
v-validate="'required|max:255|email'"
v-model="email"
data-vv-name="email"
placeholder="Enter user's email"
>
<span v-show="vueErrorsList.has('email')"
class="text-danger">{{ clearErrorLabel(vueErrorsList.first('email'), '') }}</span>
</div>
</div>
...
makeSignUp() {
this.$store.dispatch('signUp'); // calling action
signUp(this.$data.form)
.then((res) => {
this.$store.commit("signUpSuccess", res); // calling mutation
this.$router.push({path: '/login'});
})
.catch((error) => {
console.log("error::")
console.log( error )
this.$setLaravelValidationErrorsFromResponse(error);
// this.$setLaravelValidationErrorsFromResponse(error.response.data);
this.$store.commit("signUpFailed", {error}); // calling mutation
});
In the error text line content is :
The given data was invalid.
and request file I have rules :
public function rules()
{
return [
'email' => 'required|email|unique:users|max:255',
...
];
}
在浏览器中,我看到电子邮件字段错误:https://imgur.com/a/k2gZkpe 但是,与我期望的一样,此电子邮件字段错误不在我的vueErrorsList错误中。
为什么以及如何解决?
app.js :
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from 'vee-validate-laravel';
const veeValidateConfigArray = {
errorBagName: 'vueErrorsList', // change if property conflicts
fieldsBagName: 'fields',
delay: 0,
locale: 'en',
dictionary: null,
strict: true,
classes: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'input|blur',
inject: true,
validity: false,
aria: true,
};
Vue.use(VeeValidate, veeValidateConfigArray);
Vue.use(VeeValidateLaravel);
package.json :
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.4.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"cors": "^2.8.5",
"vee-validate": "^2.2.5",
"vee-validate-laravel": "^1.1.0",
"vue-js-modal": "^1.3.31",
"vue-moment": "^4.0.0",
"vue-notification": "^1.3.16",
"vue-router": "^3.0.6",
"vue-select": "^3.1.0",
"vue-slider-component": "^3.0.31",
"vue2-filters": "^0.6.0",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.1.0"
}
}