使用Bootstrap5的警報div時未觸發Vue的反應性

使用 Bootstrap 5 的警報 div 時未觸發 Vue 的反應性。

看我的代碼：

<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>

控制臺日志：

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 

問題是，5 秒后，雖然變數的值發生了變化，但警報仍然可見。

我檢查了一些類似的問題，并且在未加載引導程式的 javascript 時看到了這種情況。但對我來說，Bootstrap v5.0.1 JS 正在從 CDN 加載并出現在 Chrome 的源選項卡中。

uj5u.com熱心網友回復：

嘗試將 setTimeout 內部的函式更改為這樣的箭頭函式

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

所述this的內部setTimeout(function () => {})參考錯誤的背景關系（函式本身）而不是Vue的組件。

箭頭函式沒有this系結，因此當您使用箭頭函式時，this關鍵字將參考 Vue 組件并更改狀態。

更多資訊：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

標籤：Vue.js Vuejs3 bootstrap-5

上一篇：如何在MongoDB聚合管道中將物件陣列轉換為嵌套物件

下一篇：Vue.js，連接字串和變數的bootstrap-vue語法