Vee-Validate 3.0 - базовый пример значения => !! значение не работает для меня - PullRequest
Новая
       10

Vee-Validate 3.0 - базовый пример значения => !! значение не работает для меня

1 голос
/ 15 октября 2019

Я начал использовать VE-валидацию сегодня, и она работает довольно хорошо. За исключением обязательного правила. Я взял базовый пример из документации, поэтому он должен работать правильно? Это ничего не показывает, что я пропускаю? Это validate: value => value === "example" работает нормально, когда я начинаю что-то печатать в поле ввода, появляется ошибка.

И что же !! значит? Я искал оператор js, но не смог его найти. Я предполагаю, что он проверяет, является ли значение нулевым?

Vue компонент 

    <template>
    <div class="wrapper fadeIn">
        <div id="formContent">
            <form>
                <ValidationProvider rules="required" v-slot="{ errors }">
                    <input
                        v-model="form.username"
                        type="text"
                        id="username"
                        class="fadeIn second"
                        name="login"
                        placeholder="username"
                    />
                    <span>{{ errors[0] }}</span>
                </ValidationProvider>
                <input
                    v-model="form.email"
                    type="text"
                    id="email"
                    class="fadeIn second"
                    name="login"
                    placeholder="email"
                />
                <input
                    v-model="form.password"
                    type="password"
                    id="password"
                    class="fadeIn third"
                    name="login"
                    placeholder="password"
                />
                <input
                    v-model="form.passwordConfirmation"
                    type="password"
                    id="confirm"
                    class="fadeIn third"
                    name="login"
                    placeholder="confirm password"
                />
                <input
                    @click.prevent="register"
                    type="submit"
                    class="fadeIn fourth"
                    value="Register"
                />
            </form>

            <div id="formFooter">
                <router-link to="/" class="underlineHover">Forgot Password?</router-link>
                <router-link to="/" class="underlineHover">Log In</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            form: {
                username: "",
                email: "",
                password: "",
                passwordConfirmation: ""
            },
            logginError: ""
        };
    },
    methods: {
        register() {
            this.$store
                .dispatch("tryRegister", this.form)
                .then(response => {
                    this.$router.push({ path: "/" });
                })
                .catch(error => {
                    this.logginError = error;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/popup.scss";
</style>

Правило 

extend("required", {
    validate: value => !!value,
    message: "This field is required"
});
...