Почему vee-validate-laravel не показывает ошибку для поля электронной почты? - PullRequest
Новая
       13

Почему vee-validate-laravel не показывает ошибку для поля электронной почты?

0 голосов
/ 10 июня 2019

В приложении 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"
    }
}
...