使用Bootstrap 5的alert div时Vue响应式机制未触发问题求助

• this指向丢失：setTimeout中使用普通函数作为回调时，函数内部的this指向全局window对象，而非当前Vue实例。你修改的this.alertICDMsg实际是挂载在window上的非响应式变量，Vue实例的响应式数据并未更新，因此v-if不会触发DOM销毁，alert组件自然不会消失。你控制台打印的空值为window下的变量，所以watch也只触发了第一次赋值的更新日志。
• （次要场景）如果手动点击过alert的关闭按钮，Bootstrap 5会直接将alert的DOM元素从页面中移除，后续就算响应式变量更新，也可能出现渲染异常。

1. 修正this指向 #

将setTimeout的回调改为箭头函数，继承外层作用域的Vue实例this：

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(() => {
    console.log(`Dismissing alert`); 
    this.alertICDMsg=''; 
    console.log(`alertICDMsg is ${this.alertICDMsg}`);
  }, 5000);
}

2. 修复手动关闭后无法再次弹出的问题 #

给alert组件绑定动态key，每次变量更新时Vue会重新生成全新的DOM节点，避免Bootstrap修改DOM导致的响应式异常：

<div
  v-if="alertICDMsg!==''"
  :key="Date.now()"
  id="alertICDCode"
  class="alert alert-info alert-dismissible fade show"
  role="alert"
>
  <!-- 内部内容保持不变 -->
</div>

内容的提问来源于stack exchange，提问作者Joel G Mathew