https://vuetifyjs.com/en/components/data-tables/#crud-actions
I am using this table. There is no Error Checking if the form is empty. How will I add the Error checking?
I have tried with this:
<v-form #submit.prevent="save">
<v-text-field v-model="editedItem.customer_name" :rules="customerNameRules" required></v-text-field>
<v-btn color="blue darken-1" #click="save">Save</v-btn>
</v-form>
But it is not working!!! Just closing the Modal and added Empty Value in Array!
if you want to use #submit.prevent , then your v-btn needs a type="submit" to know it's a submit button. or if you want to use #click you can programmatically call validation with this.$refs.form.validate() like :
<template>
<v-form ref="form">
<v-text-field v-model="editedItem.customer_name" :rules="customerNameRules"
required></v-text-field>
<v-btn color="blue darken-1" #click="save">Save</v-btn>
</v-form>
</template>
<script>
save() {
if(this.$refs.form.validate()) {
//save my item...
}
}
</script
Related
I'm a complete beginner to Vue and I have an extremely basic question that is tripping me up.
I have a Dialog that opens up and asks for user input. When the user clicks okay, it makes a call to an API and tries to add the user input to a database. This works fine and I'm able to successfully hit the database. The issue I'm having is if the API doesn't return a 200. I want to persist the dialog and add text that says "Invalid Input. Try again." However, everything I've tried just closes the dialog automatically.
The code I have looks like:
<v-dialog v-model="show" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn text color="green" v-bind="attrs" v-on="on"> Add User </v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2"> Add User </v-card-title>
<v-spacer></v-spacer>
<v-card-text>
<v-text-field label="User to add" v-model="addUser"></v-text-field>
</v-card-text>
<!-- <v-card-text v-if="successfullyAdded == false"><strong class="red--text text--lighten-1">Please input a valid username</strong></v-card-text> -->
<v-spacer></v-spacer>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="
show = false
addUser(index)
"
>
Add
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
How do I persist a dialog conditionally such that it stays open if addUser returns False and otherwise closes normally?
I have a problem with <v-dialog> that appears everywhere in my Vue.js application using Vuetify.js.
Every <v-dialog> is loading twice on the page. You can see it by looking at how it appears:
If I close one dialog the other dialog stays visible and works exactly like the first. It seems like Vue is generating two instances of it.
The code of the dialog isn't the issue, I think:
<v-dialog
v-model="dialog"
persistent
hide-overlay
no-click-animation
>
<v-card>
<v-card-title>Text</v-card-title>
<v-card-text>
<p class="subtitle-1">Some more text</p>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
depressed
>
Next
<v-icon right>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
The v-model is declared in data():
export default {
data() {
return {
dialog: true,
};
},
}
Any help is appreciated! Thanks.
I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers
Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline button. but I am confused how to place the outline button next to the datepicker
My script like this :
<template>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">Call datepicker</v-btn>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
modal: false,
}),
}
</script>
Is it possible to customize the datepicker to be like that?
That Datepicker is not part of Vuetify. That screenshot you took is in fact an <iframe> of the https://calendly.com/ website, which looks like a website for managing appointments. So that calendar is basically just custom CSS made by that company, nothing to do with Vuetify.
I have trouble resetting vuetify validation in v-dialog.
This codepen is the simplified version of what I have.
https://codepen.io/yuukive/pen/BVqpEZ
With the code above, if I do
(Open dialog --> press SAVE button --> (validation fails) --> press CLOSE button --> open dialog again),
it is already validated when I open the dialog again...
Is it possible to reset validation before a user opens it the 2nd time?
new Vue({
el: '#app',
data: () => ({
dialog: false,
emailRules: [v => !!v || 'Name is required']
}),
methods: {
onSave() {
if (!this.$refs.form.validate()) return
dialog = false
}
}
})
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="500px">
<v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
<v-card>
<v-card-title>
<span class="headline">Email</span>
</v-card-title>
<v-form ref="form">
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12>
<v-text-field label="Email" required :rules="emailRules"></v-text-field>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click.native="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat #click.native="onSave">Save</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-layout>
</v-app>
</div>
Example from docs uses:
this.$refs.form.reset()
Note that while reset() clears validation, it clears input as well.
You can follow this issue to see further updates on this.
So you can perhaps watch dialog value and reset the form:
watch: {
dialog() {
this.$refs.form.reset()
}
}
resetValidation() will clear validation errors only, reset() will also clear input fields.
this.$refs.form.reset() might work on JavaScript, but compiler for TypeScript complains about typing. Even though during serve you can only see errors in the terminal without breaking the app, it'll actually break when you'll try to build the app.
Creating a new variable and assigning into it any type does the trick, below an example:
const refForm: any = this.$refs.form;
refForm.reset();
I am using Vuetify and VueJS (the latest versions).
Here is the small template of Login.vue:
<template>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="success">
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form #submit.prevent="checkLogin">
<v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="my#login.com"></v-text-field>
<v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- TODO fix the bug when form.submit not works -->
<v-btn type="submit" color="success">Login</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</template>
So, if you see, there is an #submit.prevent on v-form with checkLogin call and it is not working while clicking the submit buttor nor hitting the enter button while in input. Using #submit without prevent also has no effect.
But! If I put event handler on the v-btn like this:
<v-btn #click.native="checkLogin">
after clicking the button (not hitting the enter in input fields) all works as expected.
So, can you please tell me, what am I doing wrong with the v-form submition event handling?
Thank you!
Your submit button isn't inside the form so it's not triggering a submit event.
Either re-structure your markup or try setting an id on the form and use the form attribute on the button, eg
<v-form #submit.prevent="checkLogin" id="check-login-form">
and
<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>
Note: The form attribute does not work for any version of Internet Explorer.