i have use it but date not selected on first click, used version is "vue": "2.x","vue-flatpickr-component": "^8.1.6",
and my code is:
<b-form-group class="requied_field showOnCheck"
:label="$t('Start On')"
label-for="v-autoresponder_start_date"
:description="$t('start_on_desc')">
<validation-provider
#default="{ errors }"
:name="$t('Start On')"
rules="required">
<b-input-group class="input-group-merge">
<b-input-group-prepend is-text>
<feather-icon icon="CalendarIcon" />
</b-input-group-prepend>
<flat-pickr
v-model="formData.autoresponder_start_date"
:disabled="isDisabledField"
class="form-control"
id="v-autoresponder_start_date"
:config="{ defaultDate:'today',enableTime:true, minDate:'today', maxData:formData.autoresponder_end_date, dateFormat: 'Z', altInput: true}"
/>
</b-input-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
Please anyone solve the problem.
Add your config inside data function
export default {
data () {
return {
dateConfig:
{
defaultDate:'today',
enableTime:true,
minDate:'today',
maxData:formData.autoresponder_end_date,
dateFormat: 'Z',
altInput: true
}
}
},
}
Use as follows
<flat-pickr
v-model="formData.autoresponder_start_date"
:disabled="isDisabledField"
class="form-control"
id="v-autoresponder_start_date"
:config="dateConfig"
/>
Related
I have the following code on a form
<template>
<base-layout :layout-classes="layoutClasses">
<div class="container mt-3">
<div v-if="storing">
<h3>Please wait....</h3>
</div>
<div class="content">
<base-block rounded title="Create Center">
<b-form #submit.prevent="AddForm" class="mb-5">
<b-form-group label-cols-sm="2" label="English Name">
<b-form-input v-model="name.en" class="form-control-alt" type="text" placeholder="English name"></b-form-input>
</b-form-group>
<b-form-group label-cols-sm="2" label="French Name">
<b-form-input v-model="name.fr" class="form-control-alt" type="text" placeholder="French Name"></b-form-input>
</b-form-group>
<b-form-group label-cols-sm="2" label="Italian Name">
<b-form-input class="form-control-alt" v-model="name.it" type="text" placeholder="Italian Name"></b-form-input>
</b-form-group>
<b-form-group label="Image" label-cols-sm="2">
<b-form-file :state="Boolean(image)" plain v-model="image"></b-form-file>
</b-form-group>
<b-form-group label="" label-cols-sm="2">
<b-button type="submit" class="text-white" variant="dark">Submit</b-button>
<b-button type="reset" class="text-white" variant="danger" #click="ResetForm()">Reset</b-button>
</b-form-group>
</b-form>
</base-block>
</div>
</div>
</base-layout>
</template>
<script>
export default {
data () {
return {
name: [],
image: null,
storing: false,
}
},
methods: {
AddForm ()
{
this.submitted = true
this.storing = true
this.errors = {}
var self = this
axios.post('/form', this.form)
.then(function(response){
const status = response.status;
self.$router.push('/forms')
})
.catch(err => {
if (status == 401) {
self.$router.push('/login')
}
Object.assign(this.errors, {}, err.response.data.errors)
})
.finally(() => {
this.storing = false
})
},
}
}
</script>
Name field should come in array but when I console this.form all the values are empty. What am I doing wrong here? How should I give name to the field if the field should inside a same name attribute? How does the input file work when it come to vue?
You don't have "form" in data object and input's v-model don't have any binding with form. So:
// update v-model of all inputs
<b-form-input v-model="form.name.en" class="form-control-alt" type="text" placeholder="English name"></b-form-input>
// add form to data object:
form: {
name: {
en: "",
fr: ""
},
image: ""
}
I added Vue Stripe on my vue2 Project and I have 2 similar errors on my code :
Property 'redirectToCheckout' does not exist on type 'Vue | Element | (Vue | Element)[]'.
Property 'publishableKey' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
I followed the documentation on their website and everything is similar as their code so I don't know why I have those errors.
Screenshots
Here is my code if you want to check
<template >
<div class="section form-degustation-section" style="padding-top:150px">
<div class="mycontain form-degustation-contain" >
retrouner aux calendrier des soirées
<div class="soiree-text-presentation-contain">
<h1>{{ degustation[0].title }}</h1>
<p>{{ degustation[0].description }}</p>
</div>
<div class="soiree-form-contain">
<h2>Formulaire de réservation</h2>
<div class="w-form">
<div id="wf-form-soirees-degustation" name="wf-form-soirees-degustation" data-name="soirees degustation" action="https://natureetvins.foxycart.com/cart" method="post">
<label for="name">Nom et prénom</label>
<input type="text" class="w-input" maxlength="256" name="name" data-name="Name" placeholder="Ecrivez votre nom et prénom" id="name" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-0">
<label for="email">Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email" data-name="Email" placeholder="Ecrivez votre adresse email" id="email" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-1">
<label for="email-2">Téléphone</label>
<input type="text" class="w-input" maxlength="256" name="field" data-name="Field" placeholder="Ecrivez votre numéro de téléphone" id="field" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-2">
<label for="quantity" >Quantité</label>
<input v-model="lineItems[0].quantity" type="number" class="w-input" maxlength="256" placeholder="Combien de places voulez vous acheter ?" required="">
<div class="w-embed">
<input type="hidden" name="name" value="Name">
<input type="hidden" name="prix" value="Prix">
<input type="hidden" name="image" value="Image">
</div>
<div class="event-cta-contain">
<div>
<stripe-checkout
ref="checkoutRef"
mode="payment"
:pk="publishableKey"
:line-items="lineItems"
:success-url="successURL"
:cancel-url="cancelURL"
/>
<button #click="submit()" class="cta-button w-button">Payer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { StripeCheckout } from "#vue-stripe/vue-stripe";
import axios from "axios";
import Vue from 'vue';
export default Vue.extend({
components: {
StripeCheckout,
},
data() {
this.publishableKey = "pk_test_51JAWNYJ3Er0D2qeQ9y9P0RXOsZPfxGC9VVour44gRX2NNiP2CBAzV0NECWsupE5WZhybNBT8TX5TDG5XUOHxg8rg00rMplGIhK";
return {
degustation: [{
}],
id_product: this.$route.params.id as string,
loading: false,
lineItems:[
{
price: "price_1JChqzJ3Er0D2qeQ8cZhp2RM",
quantity: 1 ,
}],
successURL: "http://google.fr",
cancelURL: "http://google.fr",
};
},
mounted() {
axios
.get(`http://localhost:3000/api/v1/degustations/${this.id_product}`)
.then((response) => (this.degustation = response.data));
},
methods: {
submit() {
this.$refs.checkoutRef.redirectToCheckout()
},
},
});
</script>
Do I need to import something else or ?
A couple of things are happening here.
First, keep in mind that if you want to access the publishableKey in the template then you should add it in the object that you're returning in the data() function.
Try to do some checking before accessing checkoutRef, try this:
if (this.$refs.checkoutRef) {
this.$refs.checkoutRef.redirectToCheckout()
}
I want to access the error message returned from my api if error exists for its corresponding input field. With what I have tried, all errors returned from the api shows below all input fields as in the image below.
Below are the parent and child vue components.
InputField.vue
<template>
<div class="form-group basic">
<div class="input-wrapper">
<label class="label" :for="name">{{label}}</label>
<input :type="type"
class="form-control"
:class="errorClassObject()"
:id="name" :placeholder="placeholder"
:v-model="value" #input="updateField">
<i class="clear-input">
<ion-icon name="close-circle" role="img" class="md hydrated" aria-label="close circle"></ion-icon>
</i>
</div>
<div v-text="errorMessage(name)" class="input-info text-danger">Error here</div>
</div>
</template>
<script>
export default {
name: "InputField",
props: [
'name', 'value', 'type', 'label', 'placeholder', 'errors'
],
data: function() {
return {
}
},
computed: {
hasError: function(){
return this.errors
//return this.errors.name throws an error name is undefined
}
},
methods: {
updateField (){
this.$emit('input', event.target.value)
},
errorMessage(name){
if(this.hasError){
return this.errors;
//return this.errors.name throws undefined name
}
},
errorClassObject (){
return{
'error-field': this.hasError
}
}
}
}
</script>
<style scoped>
</style>
ChangePassword.vue
<template>
<form #submit.prevent="onSubmit">
<form-input
required
name="current_password"
type="password"
label="Current Password"
:errors="errors"
placeholder="Enter current password"
v-model="passwordForm.current_password"
/>
<form-input .../>
<form-input.../>
<div class="form-button-group transparent">
<button type="submit" class="btn btn-primary btn-block btn-lg">Update Password</button>
</div>
</form>
</template>
Presently, if there are any errors from the request, the response is returned in the format below
You could get access to it using the square brackets like :
errorMessage(name){
if(this.hasError){
return this.errors[name];
}
},
I have a button that should toggle and also call a method. How do I achieve this? Seems like it can be only one or the other.
new Vue({
el: "#app",
data: {
iExist:false,
iDoNotExist: true,
},
methods: {
iSignedUpforThis: function(){
console.log("step X");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-show="iExist"> i EXISTS </p>
<p v-show="iDoNotExist">
<strong> You are not found: </strong>
<form >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
</form>
<BUTTON v-on:click="iExists = iDoNotExist">
TOGGLE MY EXISTENCE
</BUTTON>
</div>
Move
iExists = iDoNotExist to a method:
methods: {
iSignedUpforThis: function(){
this.iExist = this.iDoNotExist
console.log("step X");
}
}
<button v-on:click="iSignedUpForThis">
TOGGLE MY EXISTENCE
</button>
First off to accomplish your desired result you need only one Boolean variable. Then in your method just switch between true and false. Also you have an invalid markup - there is closing tap p but no closing. That's why your example does not work.
Notice: it's bad idea to nest form tag inside p tag, so use div instead. It's considered a good practice to associate your input with it's label using label tag. Also there is shortcut for v-on:click - #click. data should be an function that returns an object, this will prevent . multiple instance to share the same object.
If you follow above recommendations you will make your code much clear and bug-less.
new Vue({
el: '#app',
data: {
isExist: false,
},
methods: {
method() {
this.isExist = !this.isExist
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-show="isExist">I exist</div>
<div v-show="!isExist">
<strong>You are not found:</strong>
<form>
<label>First name:<br>
<input type="text" name="firstname" value="Mickey">
</label>
<br>
<label>Last name:<br>
<input type="text" name="lastname" value="Mouse">
</label>
</form>
</div>
<button #click="method">Toggle</button>
</div>
It might be late but I am sure it will help others. Create a component ToggleButton.js and paste the below codes.
<template>
<label for="toggle_button">
<span v-if="isActive" class="toggle__label">On</span>
<span v-if="! isActive" class="toggle__label">Off</span>
<input type="checkbox" id="toggle_button" v-model="checkedValue">
<span class="toggle__switch"></span>
</label>
</template>
<script>
export default {
data() {
return {
currentState: false
}
},
computed: {
isActive() {
return this.currentState;
},
checkedValue: {
get() {
return this.defaultState
},
set(newValue) {
this.currentState = newValue;
}
}
}
}
</script>
Take a look at the article to learn more https://webomnizz.com/create-toggle-switch-button-with-vue-js/
How to add invalid class to form-group if the validation fails on input. By default VueValidate adds to the input.
<div class="form-group">
<label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
<input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
<span class="invalid-feedback">{{ errors.first('mobile') }}</span>
</div>
Currently i am using v-bind:class="{'text-danger': errors.has('mobile')}" on the label and i get red colored label on field error.
If i could add invalid to form-group, it would be better to control with css. Below is my VueValidate Settings
Vue.use(VeeValidate, {
aria: true,
classes: true,
classNames: {
invalid: 'is-invalid'
}
});
You can bind a computed function to check errors and return the div's classes
{
computed: {
formGroupClass: function () {
if (this.error.has('mobile') ){
return ['form-group', 'invalid']
}
return ['form-group']
}
}
}
<div :class="formGroupClass">
<label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
<input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
<span class="invalid-feedback">{{ errors.first('mobile') }}</span>
</div>