Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

eggplantSword's avatar

Run method before v-model is changed

Let me explain what I'm trying to do:

  • when I change the value on a select I want if there was one already selected to ask the user if they are sure before changing the actual value since that value would reset the form items.

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?

0 likes
1 reply
sergiosrtd's avatar

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

Please or to participate in this conversation.