Я использую vuelidate
vue для выполнения некоторых проверок, но сталкиваюсь с проблемой
Я установил vuelidation
, и он был в моем файле package.json, поэтому при нажатии кнопки я пытаюсь получить доступ this.$v
это печать неопределенная на консоли
Я импортировал vuelidate в мой main.js, как показано ниже
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuelidate from 'vuelidate'
import 'bootstrap-vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//Vue.config.productionTip = false
Vue.use(vuelidate)
new Vue({
router,
store,
vuelidate,
render: h => h(App)
}).$mount('#app')
, после чего я пытаюсь использовать его на своей странице входа в систему
<template>
<form>
<div class="form-group mb-3">
<input v-model="form.email"
name="email"
type="email" placeholder="Email address"
autofocus="" class="form-control rounded-pill border-3">
</div>
<div class="form-group mb-3">
<input v-model="form.password"
id="password" name="password"
type="password" placeholder="Password"
class="form-control rounded-pill border-3">
</div>
<button type="submit" @click.prevent="login" class="btn btn-success btn-block text-uppercase mb-2 rounded-pill">
Login
</button>
</form>
</template>
<script>
import {required,email} from 'vuelidate/lib/validators'
export default {
data () {
return{
form: {
email:null,
password:null
}
}
},
validations: {
form: {
email: {
required,
email
},
password:{
required,
email
}
}
},
methods: {
login () {
console.log(this.$v) //here it prints all values as undefined
// this.$v.form.$touch()
this.$store.dispatch('auth/loginWithCredentials',this.form)
}
}
}
</script>
Пожалуйста, проверьте
Кто-нибудь здесь, пожалуйста, помогите мне, я правильно упаковываю свои файлы, не знаю, почему не может использоватьvuelidate методы или функции