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();
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.
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
I'm using Vue and Vuetify and I'm having trouble closing a dialog from within a child component using $emit. In the main component I'm using v:on:close-dialog="closeDialog" and setting this.dialog = false. I'm trying to call that function from within the child. Trying three different ways:
On the <v-icon>close</v-icon> in the child component, I'm calling a closeDialog method that calls this.$emit('close-dialog').
On the <v-btn>Cancel</v-btn>, I have v-on:click="$emit('close-dialog')".
On the <v-btn>Cancel 2</v-btn>, I have v-on:click="$emit('dialog',false)".
None of those close the dialog or fire off the closeDialog method in the main component. Code is below.
mainComponent:
<template>
<v-flex>
<v-flex xs12 class="text-xs-right">
<v-dialog v-model="dialog" fullscreen hide-overlay
transition="dialog-bottom-transition">
<v-btn fab slot="activator" small color="red" dark>
<v-icon dark >add</v-icon>
</v-btn>
<childComponent v:on:close-dialog="closeDialog" />
</v-dialog>
</v-flex>
</v-flex>
</template>
<script>
import childComponent from './childComponent'
export default {
data(){
return{
dialog: false
}
},
name: 'Test',
components: {
childComponent
},
methods:{
closeDialog: function(){
console.log('close dialog 2');
this.dialog = false;
}
}
}
</script>
childComponent:
<template>
<v-flex xs12>
<v-card>
<v-toolbar dark color="primary">
<v-btn icon dark v-on:click="closeDialog">
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Dialog Test</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat v-on:click="$emit('close-dialog')">Cancel</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat v-on:click="$emit('dialog',false)">Cancel 2</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-flex xs12 class="px-10">
<v-form ref="form">
<v-text-field
v-model="testField"
:counter="150"
label="Test field"
required
></v-text-field>
</v-form>
</v-flex>
</v-card>
</v-flex>
</template>
<script>
export default {
data: () => ({
testField: ''
}),
methods: {
closeDialog: function(){
console.log('close dialog 1');
this.$emit('close-dialog');
}
}
}
</script>
As you might have guessed, I'm new to Vue and still fumbling my way through it. Any help would be much appreciated.
In your parent you have:
<childComponent v:on:close-dialog="closeDialog" />
it should be (hyphen replaces colon in v-on):
<childComponent v-on:close-dialog="closeDialog" />
or #close-dialog altenatively.
This method, combined with this.$emit('close-dialog'); in your child should work.
I have a main component that is used to display items using a loop:
<v-list-tile v-for="(item, index) in items" :key="item.title">
...
<report type="item.type"> </report>
</v-list>
The report component is used to report abuse on the system, and report type may vary depending on the item from the parent loop.
As users are very unlikely to use report on a regular basis I would like to only load v-select elements when the Dialog (modal) is opened.
Using created or mounted triggers the loading method everytime the report component is generated and not when the report component is opened.
Is there a smart way to prevent this and only have the loading method within report being triggered only when the component is opened.
=== Report.vue file ===
=== This file is loaded in the parent component
<template lang="html">
<v-dialog v-model="dialog" persistent max-width="800px" lazy>
<v-btn icon slot="activator">
<v-icon>error_outline</v-icon>
</v-btn>
<v-card>
<v-card-title>
<div class="headline"><v-icon large>error_outline</v-icon> Reporting</div>
</v-card-title>
<v-card-text>You are about to report the following {{ reportType }}: "<i>{{ reportContent.title }}</i>"
<v-container v-if="this.$store.getters['report/getLoadedState']" grid-list-md >
<v-layout wrap>
<v-flex xs12 sm12>
<v-select
label="Select a reason"
required
cache-items
:items="items"
item-text="title"
item-value="id"
></v-select>
</v-flex>
<v-flex xs12 sm12>
<v-text-field
label="Please provide additional information here"
multi-line></v-text-field>
</v-flex>
</v-layout>
</v-container>
<v-container v-else grid-list-md>
<v-layout>
<v-flex xs12 sm12>
Loading
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" #click.native="cancel">Cancel</v-btn>
<v-btn color="green darken-1" flat="flat" #click.native="report">Report</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'report',
data () {
return {
dialog: false,
items: this.$store.getters['report/getItems']
}
},
props: ['reportType', 'reportContent'],
methods: {
cancel () {
this.dialog = false
},
report () {
this.dialog = false
},
loadReasons (type) {
if (!this.$store.getters['report/getLoadedState']) {
this.$store.dispatch('report/setItems', type)
}
}
}
}
</script>
<style lang="css" scoped>
</style>
PS 1: I'm not using JQuery and do not intend to use it
PS 2: Calling the method outside of the report component is not an option as I want to maximize reusability of this compenent and only pass arguments to it using props
How I have done this in the past is to use a "dynamic component." Vue uses a special syntax for dynamic components <component v-bind:is="currentView"></component> see: Vue dynamic components
You can set the "currentView" property to null and then on a button click another event set the currentView to report. Doing it this way will allow you to use the mounted method as the component is not rendered or created until it is dynamically called.
<component :is="myComponent"></component>
<v-btn #click="loadComponent">Show Report</v-btn>
then...
data:{
myComponent: null;
},
methods: {
loadComponent: function(){
this.myComponent = 'report';
}
}
P.S. You can of course use this method to render any other components in the same place. i.e. you can set the 'currentView' to the name of any available component and it will be instantly rendered in its place.
I ended up using a watch on the boolean managing the dialog...
Make a function which loads the v-select. Don't initialize it just create it. Now whenever user clicks the report model you can initialize multiple functions using v-on:click or #click.
For example :
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
This solution can also be found on :
Stackoverflow Link