Суть вопроса в следующем: если нажать на кнопку далее или назад, не нажав при этом кнопку сохранить, то должно вылазить диалоговое окно(сохранить или нет изменения), если кнопка нажата, то просто переходят на следующий(предыдущий) шаг, но если нажать на кнопку сохранить, а затем на кнопку далее(назад) один раз. то она не работает, а если нажать ещё раз, то вылазит диалоговое окно с вопросом. В чём ошибка?
Ссылка на мой пример в codepen<div id="app">
<v-app id="inspire">
<v-stepper class="pb-0" v-model="steppers[0]" vertical>
<v-stepper-step class="pb-4" :complete="steppers[0] > 1" step="1" editable >
О себе
</v-stepper-step>
<v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="1">
<div style="float: right">
<v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
</div>
</v-stepper-content>
<v-stepper-step class="pb-4" :complete="steppers[0] > 2" step="2" editable >
Формат работы и занятость
</v-stepper-step>
<v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="2">
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(-1,0)">Назад</v-btn>
<div style="float: right">
<v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
</div>
</v-stepper-content>
<v-stepper-step class="pb-4" :complete="steppers[0] > 3" step="3" editable>
Образование
</v-stepper-step>
<v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="3">
<v-btn class="mr-0 mb-4 ml-0 mt-0" @click="save_click_or_not(-1,0)">Назад</v-btn>
<div style="float: right">
<v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
</div>
</v-stepper-content>
<v-stepper-step class="pb-4" :complete="steppers[0] > 4" step="4" editable>
Профессии и Сферы деятельности
</v-stepper-step>
<v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="4">
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(-1,0)">Назад</v-btn>
<div style="float: right">
<v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
<v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
</div>
</v-stepper-content>
</v-stepper>
<v-dialog v-model="save_or_save" width="500">
<v-card>
<v-toolbar>
<h3>Внимание</h3>
</v-toolbar>
<v-divider></v-divider>
<v-card-text class="pa-4">
Вы хотите сохранить текущие данные?
<div class="pt-4">
<v-btn @click.native="dialog_close(false,0)" class="ma-0">Нет</v-btn>
<v-btn @click.native="dialog_close(true,0)" style="float: right" class="ma-0">Да</v-btn>
</div>
</v-card-text>
</v-card>
</v-dialog>
</v-app>
</div>
java-script код
new Vue({
el: '#app',
data () {
return {
e1: 0,
steppers:[1,1,1,1],
save_not_save: true,
save_or_save: false,
}
},
methods:{
save_click_or_not(naprav,index){
this.step_go=naprav
if(this.save_not_save){
this.save_or_save=true;
// this.dialog_save(tyy)
}
if(!this.save_not_save){
this.steppers[index]=this.steppers[index]+this.step_go
this.save_not_save=true
}
},
dialog_close(y_n,index){
this.save_or_save=false
this.save_not_save=true
this.steppers[index]=this.steppers[index]+this.step_go
},
}
})
