Nothing I've found has fixed this issue. I am getting the following error for this Vue component. I am trying to use the Vuelidate library to validate my form. Any idea what I am missing here?
Uncaught TypeError: Cannot read property '$v' of undefined
<script>
import Vue from "vue";
import Vuelidate from "vuelidate";
import { required, minLength, email, sameAs } from "vuelidate/lib/validators";
Vue.use(Vuelidate);
const hasUpperCase = (value) =>
value.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/);
export default {
validations: {
form: {
Email: {
required: required,
isEmail: email,
},
ConfirmEmail: {
required: required,
isEmail: email,
match: sameAs(this.$v.form.Email),
},
},
},
};
</script>
My Main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
validations:{},
render: (h) => h(App)
}).$mount("#app");
First of all, install it using this command: npm install vuelidate --save
I would recommend us to define it globally by importing it in your src/main.js file like this
import Vuelidate from 'vuelidate';
Vue.use(Vuelidate)
After this is done import your validator classes into your component:
import { required, minLength, email, sameAs } from "vuelidate/lib/validators";
A good practice is to define your data models first before writing your validation, so you can do this:
data(){
return {
name:"",
email:"",
}
}
Now you can go ahead and define your validations
validations:{
name::{
required,alpha
},
email:{
required,email
}
}
One last thing you need to do is add validations:{} in your main.js file.
Related
I'm new to Vue CLI, and I'm trying to build a small application. As part of this I want to generate some forms.
I've tested a few libraries, and NCForms seems to do all I need to do. (specifically, I need to handle capturing of multiple arrays).
I tried to initialize the library as described in the documentation - but it fails in the Template saying that it can't find some of the element-ui components.
I'm pretty sure that I've followed the instructions properly - but I must be missing something small.
My main.js file looks like this:
import 'ant-design-vue/lib/style/index.less' // antd core styles
import './#kit/vendors/antd/themes/default.less' // default theme antd components
import './#kit/vendors/antd/themes/dark.less' // dark theme antd components
import './global.scss' // app & third-party component styles
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import NProgress from 'vue-nprogress'
import VueLayers from 'vuelayers'
import BootstrapVue from 'bootstrap-vue'
import VueFormulate from '#braid/vue-formulate'
// Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'
// Form generator: NCForms: https://github.com/ncform/ncform
import vueNcform from '#ncform/ncform'
// eslint-disable-next-line no-unused-vars
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ncformStdComps from '#ncform/ncform-theme-elementui'
// REST Calls: Axios: https://github.com/axios/axios
import axios from 'axios'
// Local files
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './localization'
import './antd'
import './registerServiceWorker'
// mocking api
import './services/axios/fakeApi'
Vue.use(BootstrapVue)
Vue.use(VueLayers)
Vue.use(NProgress)
Vue.use(VuePageTitle, {
prefix: 'Nedbank PhishTank | ',
router,
})
// Form generator: Vue-Form-Generator
Vue.use(VueFormGenerator)
// Form generator: NCForms
Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
window.$http = Vue.prototype.$http = axios
Vue.use(VueFormulate)
Vue.config.productionTip = false
const nprogress = new NProgress({ parent: 'body' })
new Vue({
router,
store,
nprogress,
i18n,
render: h => h(App),
}).$mount('#app')
My template looks like this:
<template>
<div>
<ncform :form-schema="formSchema" form-name="settings-form" v-model="item" #submit="submit()"></ncform>
<el-button #click="submit()">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string',
},
},
},
item: {
name: 'Peter Pan',
},
}
},
methods: {
submit () {
this.$ncformValidate('settings-form').then(data => {
if (data.result) {
console.log(this.$data.formSchema.value)
// do what you like to do
alert('finally!!!')
}
})
},
},
}
</script>
The error is:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Am I missing something like registering the individual components? I thought this line would take care of it: Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
It feels like I should put something into the "new Vue()" statement - but I'm not sure what....
In main.js, you need to specify: Vue.use(Element);
Currently I'm trying to add VeeValidate component to validate my form on Laravel, I just have installed Vue with NPM and it seems to be working, but how to enable a component for Vue?
Currently I have in my app.js:
window.Vue = require('vue');
window.JQuery = require('jquery');
import Vue from 'vue';
Vue.component('ValidationProvider', require('vee-validate'));
and attempt to call component in view:
const app = new Vue({
el:'#app',
components: {
ValidationProvider
},
data() {
return {
step:1,
registration:{
firstname:null,
lastname:null,
email:null,
street:null,
city:null,
state:null,
}
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
}
});
Console says Validationprovider is not defined... Why?
The ValidationProvider is just one component out of many exported by vee-validate, you need to import it specifically.
import Vue from 'vue';
import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
My apologies with this dumb question. I'm new to Vue and followed some tutorial on just setting it up and did it the way advised but now I don't see anything.
As said above, after importing and adding Vuex to my project, nothing is loaded on the page and there are no errors in the terminal while running the development server.
main.js
// ** if I comment these out then the page will load
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store.js' // <-- **
Vue.config.productionTip = false
new Vue({
router,
store, // <-- **
render: h => h(App)
}).$mount('#app')
store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.store({
state: {
user: '',
role: ''
},
mutations: {
},
actions: {
},
getters: {
}
})
if there is additional information needed then let me know
I need to create Vue plugin containing a few reusable components. I want to create this using TypeScript. There are my files:
components/SampleButton.vue
<template>
<button>Sample button</button>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'sample-button',
});
</script>
main.ts
import SampleButton from './components/SampleButton.vue';
export {
SampleButton,
};
export default {
install(Vue: any, _options: object = {}): void {
Vue.component(SampleButton.name, SampleButton);
},
};
shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
Plugin building is successful, but when I try to user the plugin in my app I get an error:
import MyPlugin from 'my-plugin'
Vue.use(MyPlugin)
Please help me find a mistake :)
I'm trying to use i18n outside a component I've found this solution https://github.com/dkfbasel/vuex-i18n/issues/16 telling to use Vue.i18n.translate('str'), but when I call this occurs an error Cannot read property 'translate' of undefined.
I'm using the following configuration
main.js
import i18n from './i18n/i18n';
new Vue({
router,
store,
i18n: i18n,
render: h => h(App)
}).$mount('#app')
i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import i18nData from './i18nData'
Vue.use(VueI18n);
export default new VueI18n({
locale: 'en',
messages: i18nData,
});
i18nData.js
export default {
en: {
//my messages
}
}
Then I trying to use this
import Vue from 'vue';
Vue.i18n.translate('someMessage');
Can anyone help me?
To use i18n with Vue 3's composition API, but outside a component's setup(), you can access its translation API (such as the t function) on its global property.
E. g. in a file with unit-testable composition functions:
// i18n/index.js
import { createI18n } from 'vue-i18n'
import en from './en.json'
...
export default createI18n({
datetimeFormats: {en: {...}},
locale: 'en',
messages: { en }
})
// features/utils.js
//import { useI18n } from 'vue-i18n'
//const { t } = useI18n() // Uncaught SyntaxError: Must be called at the top of a `setup` function
import i18n from '../i18n'
const { t } = i18n.global
You should import i18n instead of Vue
import i18n from './i18n'
i18n.tc('someMessage')
You can use VueI18n outside components by importing i18n then, use "t" from i18n.global.
"t" doesn't need "$" and you can change Locale with i18n.global.locale.
import i18n from '../i18n';
const { t } = i18n.global;
i18n.global.locale = 'en-US'; // Change "Locale"
const data = {
name: t('name'), // "t" doesn't need "$"
description: t('description'), // "t" doesn't need "$"
};
I managed to make it work this way:
import router from '../router';
Translate a text:
let translatedMessage = router.app.$t('someMessage');
Get the current language:
let language = router.app.$i18n.locale;