Dialog modal not closing - forms

Question

I have a problem with a dialog modal who don,t want to close even with a function
I have this code to reset and close the modal, the resetting is ok but nothing close with cancel, I use the resetForm() function
I have a form with this structure ( form and rules )
<template>
<div class="text-center">
<v-dialog
v-model="dialog"
>
<template v-slot:activator="{ on }">
<v-btn class="addGroup" v-on="on">Add a group</v-btn>
</template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Add a group
</v-card-title>
<v-stepper v-model="e1">
<v-stepper-header class="stepHeader">
<v-stepper-step :complete="e1 > 1" step="1">Choose a name</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2">Select fixtures</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 3" step="3">Apply a recipe</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 4" step="4" >Select dates</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="5">Summary</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1" class="mt-6">
<v-card
>
<div class="step chooseName">
<h3>Create a group</h3>
<p class="mt-12">Choose a name for your group</p>
<v-text-field
:rules="rules.name"
#keyup.enter="e1 = 2"
v-model="form.groupName"
></v-text-field>
</div>
</v-card>
<v-btn
color="primary"
#click="e1 = 2"
>
Continue
</v-btn>
<v-btn
text
#click="dialog = !dialog"
>
Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="2" class="mt-6">
<v-card
>
<div class="step selectFixtures">
<h3><v-icon #click="e1 = 1">mdi-chevron-left</v-icon>Select fixtures</h3>
<p class="mt-12 mb-6"
>Choose fixtures you want associate with {{form.groupName}}.</p>
<v-select
:rules="rules.fixture"
v-model="form.selectedFixture"
:items="fixtures"
item-text="name"
></v-select>
</div>
</v-card>
<v-btn
color="primary"
#click="e1 = 3"
>
Continue
</v-btn>
<v-btn
text
#click="dialog = !dialog"
>
Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="3" class="mt-6">
<v-card
flat
height="68vh"
rounded
>
<div class="step applyRecipe">
<h3><v-icon #click="e1 = 2">mdi-chevron-left</v-icon>Apply a recipe to your group</h3>
<p class="mt-12 mb-6">Select a recipe for the group {{groupName}}.</p>
<div class="selectRecipe">
<v-select
class="mr-6"
v-model="form.selectedRecipe"
:items="recipe"
item-text="name"
item-value="duration"
return-object>
</v-select>
<p>or</p>
<create_recipe></create_recipe>
</div>
</div>
</v-card>
<v-btn
color="primary"
#click="e1 = 4"
>
Continue
</v-btn>
<v-btn
text
#click="dialog = !dialog"
>
Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="4" class="mt-6">
<v-card
>
<div class="selectDates">
<h3><v-icon #click="e1 = 3">mdi-chevron-left</v-icon>Select start date</h3>
<p class="mt-6">Select the launch date of the Tuscan sun recipe for the {{groupName}} group</p>
<p>The end date will be set automatically according to the parameters of your recipe</p>
<v-date-picker
class="mt-6 ml-6"
v-model="selectedDate"
no-title
:date-format="date => new Date(date).toDateString()"
>
</v-date-picker>
</div>
</v-card>
<v-btn
color="primary"
#click="e1 = 5"
>
Continue
</v-btn>
<v-btn
text
#click="dialog = !dialog"
>
Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="5" class="mt-6">
<v-card
>
<div class="stepChooseName">
<h3><v-icon #click="e1 = 4">mdi-chevron-left</v-icon>Summary</h3>
<p class="answer">Group name :</p>
<p class="subtitle">{{form.groupName}}</p>
<v-divider></v-divider>
</div>
</v-card>
<v-btn
#click="submit()"
>
Add group
</v-btn>
<v-btn
text
#click="dialog = !dialog"
>
Cancel</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-card>
</v-form>
</v-dialog>
</div>
</template>
I have this code to reset and close the modal, the resetting is ok but nothing close with cancel, I use the resetForm() function
I have a form with this structure ( form and rules )
<script>
import Create_recipe from "./create_recipe";
export default {
components: {Create_recipe},
props: ['groups', 'fixtures'],
groups: [],
data() {
const defaultForm = Object.freeze({
groupName: '',
selectedFixture: [],
selectedRecipe: '',
selectedScenario: '',
});
return {
form: Object.assign({}, defaultForm),
valid: true,
rules: {
name: [val => (val || '').length > 0 || 'This field is required'],
fixture: [val => (val || '').length > 0 || 'fixture is required'],
recipe: [val => (val || '').length > 0 || 'recipe is required'],
},
dialog: null,
defaultForm,
e1:0,
counterOfUnnamed:'',
checkbox: true,
fixtures: this.fixtures,
selectedDate: new Date().toISOString().substr(0, 10),
recipe: [{
id:1,
name: 'Tuscan sun',
duration: '5',
},
{ id:2,
name: 'Montreal summer',
duration: '10',
},
{ id:3,
name: 'French spring',
duration: '365',
}
],
}
},
methods: {
numberOfFixture() {
return this.form.selectedFixture.length;
},
resetForm () {
this.$refs.form.reset();
this.dialog = false
},
submit() {
if (!this.form.groupName) {
this.form.groupName = "Unnamed" + this.counterOfUnnamed;
this.counterOfUnnamed = this.counterOfUnnamed + 1;
this.counterOfUnnamed = parseInt(this.counterOfUnnamed);
}
var self = this;
http.post('group/create', {
name: self.form.groupName,
}).then((result) => {
self.groups.push(result);
self.resetForm();
})
},
},
computed: {
displayFixturesName() {
return this.form.selectedFixture.join(', ');
},
formIsValid() {
return (
this.form.selectedFixture &&
this.form.selectedRecipe
)
}
}
}
</script>
```
But when I launch the reset function, the form is reset but the validation appears.
How can I solve it ?

Answer 1

There is a bug in above code, check in console, "this" keyword in Vue js should not use inside fat array functions. By default the current context points to main Vue instance in any Vue components, methods and computed properties. Using this will change the reference. In this code, it gets struck when you are calling this.groups.push(result)
Better preserve the this reference and try to achieve the same by putting resetForm inside then block
submit() {
var self = this;
http.post('group/create', {
name: self.form.groupName,
}).then((result) => {
self.groups.push(result)
self.resetForm();
// still you face issue add this line here "self.dialog = false;"
})
.catch(err => {
// handle error
});
},
Your updated script:
<script>
import Create_recipe from "./create_recipe";
const defaultForm = Object.freeze({
groupName: '',
selectedFixture: [],
selectedRecipe: '',
selectedScenario: '',
});
export default {
components: {Create_recipe},
props: ['groups', 'fixtures'],
groups: [],
data() {
return {
form: Object.assign({}, defaultForm),
valid: true,
rules: {
name: [val => (val || '').length > 0 || 'This field is required'],
fixture: [val => (val || '').length > 0 || 'fixture is required'],
recipe: [val => (val || '').length > 0 || 'recipe is required'],
},
dialog: null,
defaultForm,
e1:0,
counterOfUnnamed:'',
checkbox: true,
fixtures: this.fixtures,
selectedDate: new Date().toISOString().substr(0, 10),
recipe: [{
id:1,
name: 'Tuscan sun',
duration: '5',
},
{ id:2,
name: 'Montreal summer',
duration: '10',
},
{ id:3,
name: 'French spring',
duration: '365',
}
],
}
},
methods: {
numberOfFixture() {
return this.form.selectedFixture.length;
},
resetForm () {
this.$refs.form.reset();
this.dialog = false
},
submit() {
if (!this.form.groupName) {
this.form.groupName = "Unnamed" + this.counterOfUnnamed;
this.counterOfUnnamed = this.counterOfUnnamed + 1;
this.counterOfUnnamed = parseInt(this.counterOfUnnamed);
}
var self = this;
http.post('group/create', {
name: self.form.groupName,
}).then((result) => {
self.groups.push(result);
self.form = Object.assign({}, defaultForm);
self.dialog = false;
})
},
},
computed: {
displayFixturesName() {
return this.form.selectedFixture.join(', ');
},
formIsValid() {
return (
this.form.selectedFixture &&
this.form.selectedRecipe
)
}
}
}
</script>