When you do
this.form.survey_id = this.oldSurvey;
You are activating the watcher of form.survey_id
and for that reason the
this.showConfirm = false;
has no effect
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Let me explain what I'm trying to do:
Right now I'm using a watch to ask but now I don't know how to set the value back to the one it was before.
This is my code, the first is a simple component the is basically the title and some buttons, @btn_action is what happens when they say Yes in this case and @cancel if they don't.
t-rich-select is from this library https://www.vue-tailwind.com/docs/rich-select
<t-rich-select v-model.number="form.survey_id" placeholder="Select Survey" :options="$page.props.surveys"/>
<modal-confirm v-model="showConfirm"
@cancel="cancel_survey_change"
@btn_action="set_sheets_survey"
title="Change Survey?"
action_btn="Yes"></modal-confirm>
data() {
return {
showConfirm: false,
oldSurvey: 0,
};
},
methods: {
async set_sheets_survey() {
if (this.form.survey_excel_sheets.length > 0) {
this.form.survey_excel_sheets = []
}
await this.loadOptions(['survey_sections']);
this.$page.props.survey_sections.forEach(section => {
this.add_sheet(section.id)
})
this.showConfirm = false
},
cancel_survey_change() {
this.showConfirm = false;
this.form.survey_id = this.oldSurvey;
}
},
watch: {
'form.survey_id'(newVal, oldVal) {
this.oldSurvey = oldVal;
if (oldVal === null) {
this.set_sheets_survey()
} else if (oldVal !== newVal) {
this.showConfirm = true
}
}
},
The problem with the above code is that for some reason this.showConfirm = false in cancel_survey_change gets ignored when this.form.survey_id = this.oldSurvey is there, if I remove this.form.survey_id = this.oldSurvey than this.showConfirm = false works no problem.
How can I fix this to either ask before the change actually happens or fix what I already have?
Please or to participate in this conversation.