I have installed with npm
npm i --save nuxt-validate
a component for the validation of a form. But not works. Below the plugins/validate.js:
import { extend } from "vee-validate";
extend("my-validation", { message: "This {_field_} is invalid.", validate: value => {
// ...
return true; } });
In my nuxt.config.js:
{src: '~plugins/validate.js', ssr: true}
And in my page.vue in the script I have this situation:
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
},
and in my template this content:
<ValidationProvider rules="my-validation" v-slot="{ errors }" name="nameRegister">
<input type="text" name="nameRegister" id="nameRegister" tabindex="1" class="form-control"
placeholder="Name" value="" v-model="nameRegister">
</ValidationProvider>
During the field writing, nothing happened, why?
thanks
Related
I'm using vue i18n to add translation to my vue app anyway after installed the cli plugin and created the translation files inside the locales folder I'm unable to switch between translations.
This is the code I've added to the navigation menu
<div class="form-inline">
<label class="px-2" for=""><i class="fas fa-globe"></i></label>
<select class="form-control" v-model="$i18n.locale">
<option v-for="(lang, i) in langs" :key="i" :value="lang">{{ lang }}</option>
</select>
</div>
And this is the realtive js code:
<script>
import bus from './main'
export default {
name: 'App',
data() {
return {
isVisible: false,
langs: ['en', 'it']
}
},
mounted() {
bus.$on('closeMenu', () => {
this.isVisible = false;
});
},
methods: {
...
}
}
</script>
I was expecting that when the user select a different locale the ui is translated but this will not happen.
The content inside my localization json file is this
// locales/en.json
{
"menuLabels": {
"loadFiles": "Load files",
"deleteFile": "Delete files",
"checkFile": "Check file"
}
}
// locales/it.json
{
"menuLabels": {
"loadFiles": "Carica files",
"deleteFile": "Elimina files",
"checkFile": "Controlla file"
}
}
into the view where I need to display the translation I've added the correct code by calling the respective translation in this way <p>{{ $t("message.loadFiles") }}</p>
Is there any problem with the code?
I have made selectbox component and wants to reuse it in other components. Si I want to register that component globally. I have imported that component in main.js but doesnot works.
main.js
import Selectbox from "#/modules/Selectbox.vue";
Vue.component("Selectbox", Selectbox);
Selectbox.vue
<template>
<div>
<label>{{ label }}</label>
<select #change="$emit('input', $event.target.value)">
<option
v-for="opt in options"
:key="opt.value"
:value="opt.value"
:selected="value === opt.value"
>
{{ errorMessage }}
{{ opt.label || "No label" }}
</option>
</select>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true
},
},
data() {
return {
errorMessage: "",
option: "lorem",
options: [
{ label: "lorem", value: "lorem" },
{ label: "ipsum", value: "ipsum" }
]
};
},
};
</script>
Test.vue
<template>
<div>
<Selectbox v-model="ward_no"/>
</div>
</template>
<script>
export default {
data() {
return {
ward_no: '',
};
}
}
</script>
There is nothing wrong in the way that you are trying to register global component but you are missing script tag.
UPDATE: After talking to #prabinasht on skype and reviewing her code, I saw that in multiple files she forgot to remove locally imported/registered component and at the same time the component was registered globally too, so that was the problem.
Register the component this way
Vue.component('Selectbox', require('#/modules/Selectbox.vue').default)
I derive the component:
<my-component> </my-component>
The question is how to get the properties of this particular component, knowing only its tag "my-component"?
A more detailed description of the problem:
Using the vue-cli-service build --target wc --name my-component my-component.vue command, I compile in js file
Then I connect this script in the header of the site.
Then I use the component
But how to get the properties of this component now and generally how to access this component? How to get the input field value in this component?
Sorry, I probably didn’t explain it well.
I need something like this:
<my-component id="my-component"> </my-component>
<script>
let inputValue = $("#my-component").find("input").val();//but this not work
</script>
Or
<script>
let props = <my-component></my-component>// this component props
</script>
In the my-component.vue file, this code:
<template>
<input :placeholder="test" type="text" name="test" value="">
</template>
<script>
export default {
name: 'MyInputComponent',
props: {
placeholder: {
type: String,
default: "00"
}
},
data () {
return {
}
},
}
</script>
usage
<template>
<input :placeholder="placeholder" type="text" #input="emitInputValue">
</template>
<script>
export default {
name: 'MyInputComponent',
props: {
placeholder: {
type: String,
default: "00"
}
},
methods: {
emitInputValue ($event) {
this.$emit('input', $event.target.value)
}
}
}
</script>
get value
<my-component #input"getValue"> </my-component>
methods: {
getValue (payload) {
console.log(payload)
}
}
<template>
<input :placeholder="test" :id="id" type="text" name="test" value="">
</template>
<script>
export default {
name: 'MyInputComponent',
props: {
placeholder: {
type: String,
default: "00"
},
id: {
type: String
}
},
data () {
return {
}
},
}
</script>
Now your id would be available and you can do whatever you want.
Only one suggestion i would like to give is: when you are using vue.js then try avoiding jquery for getting input value. there are many ways in vue.js itself you can get input text value.
Let me know if you need something else
I´m using webpack and instance VeeValidate using this way:
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
// This is the default
inject: true,
// Important to name this something other than 'fields'
fieldsBagName: 'veeFields'
});
I have a vuejs component created for the user to subscribe to the email. The problem is that this form always gives true when I use $validator.validateAll()
Have I not understood well the functioning of Vee-validate?
This is the code of my component newsletter.vue.js
Vue.component('newsletter', {
template : '<div>\
<b-form inline>\
<b-input v-validate required id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Deja tu email" type="email" :state="validate_input" />\
\
<b-button variant="primary-degree" #click="validateBeforeSubmit">Enviar</b-button>\
</b-form>\
</div>',
props : ['route_post'],
inject: ['$validator'],
data() {
return {
email: '',
}
},
computed: {
validate_input: function() {
return this.errors.has("email")
}
},
methods: {
onSubmit() {
// Form submit logic
},
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
console.log(result);
if (result) {
// eslint-disable-next-line
alert('Form Submitted!');
return;
}
alert('Correct them errors!');
});
}
}
});
In order to add a validation of vee-validate you need to add it as value to v-validate option and not directly within the tag.
For more info check required example on docs
Update the below line in your code.
<b-input v-validate="'required'" id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Deja tu email" type="email" :state="validate_input" />
If you also want to display error you can add below line as =>
<span class="error" v-if="errors.has('email')">{{ errors.first('email') }}</span>
I'm trying to import an external jQuery plugin in a Vuejs component.
The plugin is nested.js
How can I do?
Thanks
You can import in script the plugin and use it in your functions, I will give you an example of datepicker which is a jquery based plugin.
<template>
<div class="input-group date">
<input type="text" class="form-control datepicker" :name="name" :value="value" #keyup.enter="validate" #blur="validate">
</div>
</template>
<script>
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
import Moment from 'moment'
export default {
props: {
value: String,
name: String,
orientation: {
type: String,
default: "top"
}
},
data() {
return {}
},
mounted() {
var vm = this;
$(this.$el).find(".datepicker").datepicker({
language: this.$store.state.currentLanguage,
format: "dd/mm/yyyy",
autoclose: true,
orientation: vm.orientation
}).on("show", () => { do what ever you want }
}
</script>
Hope this will help.
Maybe you can consider a directive for that.
First load jquery and nested.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.nested/1.01/jquery.nested.min.js"></script>
Then create a new directive.
Vue.directive('nested', function(el, binding) {
$(el).nested(binding.value)
})
Example usage:
<div v-nested="nestedJsOptions">
...
</div>
In your component:
data: {
return {
nestedJsOptions: {
minWidth: 100,
gutter: 10,
// ..
}
}
}