Vue's reactivity not triggered when using Bootstrap 5's alert div.

See my code:

<template>
    <div>
        <div
        v-if="alertICDMsg!==''"
        id="alertICDCode"
        
        role="alert"
        >
        <i  />
        <strong> Note!</strong> <span v-html="alertICDMsg" />
        <button
            type="button"
            
            data-bs-dismiss="alert"
            aria-label="Close"
        />
        </div>
        <div >
        <div >
            <input
            id="ICDCode"
            v-model="editing_icdCode"
            
            placeholder="ICD Code"
            aria-label="ICD Code"
            @input="ICDCodeSearchRequested"
            >
        </div>
        <input
            id="Diagnosis"
            v-model="editing_diagnosis"
            type="text"
            
            placeholder="Diagnosis"
            aria-label="Diagnosis"
            aria-describedby="basic-addon1"
            list="icdsearchlist"
            @change="SelectedDiagnosisTextOption"
            @input="ICDTextSearchRequested"
        >
        <datalist id="icdsearchlist">
            <option
            v-for="(disease_option, index) in icd_diagnosis_options"
            :key="index"
            >
            {{ disease_option }}
            </option>
        </datalist>
        <button
            id="btnAddDiagnoses"
            href="#"
            
            @click="AddDiagnosis"
        >
            <i  />
        </button>
        <button
            id="btnCopyPreviousDiagnoses"
            href="#"
            
        >
            <i  />
        </button>
        <button
            id="quickbill"
            
        >
            <i  />
        </button>
        <button
            id="clearICD"
            
            @click="ClearICDFields"
        >
            <i  />
        </button>
        </div>
    </div>
<template>

<script>
    export default {
    data() {
        return {
            alertICDMsg:"",
        };
    },
    watch: {
        alertICDMsg: {
            handler(val) {
            console.log(`Val for alertICDMsg changed to :${val}`);
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        ICDCodeSearchRequested() {
            console.log(`Search by ICD code`);
            this.alertICDMsg="Searching in ICD Code box will search only by code. To search by a diagnosis name, type in the Diagnosis box."
            console.log(`alertICDMsg is ${this.alertICDMsg}`);
            setTimeout(function() {
            console.log(`Dismissing alert`); 
            this.alertICDMsg=''; 
            console.log(`alertICDMsg is ${this.alertICDMsg}`);
            }, 5000);
        },
    },
    }
</script>

Console log:

Search by ICD code
SubClinicalBlock.vue?d801:291 alertICDMsg is Searching in ICD Code box will search only by code. To search by a diagnosis name, type in the Diagnosis box.
SubClinicalBlock.vue?d801:220 Val for alertICDMsg changed to :Searching in ICD Code box will search only by code. To search by a diagnosis name, type in the Diagnosis box.
SubClinicalBlock.vue?d801:293 Dismissing alert
SubClinicalBlock.vue?d801:298 alertICDMsg is 

The problem is that after 5 seconds, though the value of the variable changes, the alert is still visible.

I checked some similiar questions, and have seen this happening when bootstrap's javascript wasnt loaded. But for me, Bootstrap v5.0.1 JS is being loaded from the CDN and appears in the sources tab in Chrome.

CodePudding user response：

Try to change the function inside of setTimeout to arrow function like this

setTimeout(() => { // code here })

The this inside of setTimeout(function () => {}) reference to the wrong context (the function itself) instead of the Vue component.

The arrow function doesn't have the this binding so when you use the arrow function the this keyword will reference the Vue component and change the state.

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions