我有一个对话框模态有问题，谁甚至不想使用函数也要关闭
我有这段代码可以重置并关闭模态，重置可以，但是没有取消时可以关闭，我使用resetForm（）函数 我有一个具有这种结构的表单（表单和规则）
<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>
我有这段代码可以重置并关闭模态，重置可以，但是没有取消时可以关闭，我使用resetForm（）函数 我有一个具有这种结构的表单（表单和规则）
<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 ?
答案 0 :(得分：0)
上面的代码中有一个错误，请在控制台中检查，Vue js中的“ this”关键字不应该在fat数组函数内部使用。默认情况下，当前上下文指向任何Vue组件，方法和计算属性中的主Vue实例。使用此将更改参考。在这段代码中，调用this.groups.push（result）
更好地保留此引用，并尝试通过将resetForm放入然后阻止来实现相同目的
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
});
},
您更新的脚本：
<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>