Vue 3 中 Bootstrap 导航栏主题切换失效的解决方案

<form class="d-flex">   <button      class="btn btn-primary"      @click.prevent="changeTheme()"   >     {{ theme === 'light' ? 'Dark mode' : 'Light mode' }}   </button> </form>

立即学习“前端免费学习笔记（深入）”；

<form class="d-flex">   <button      class="btn btn-primary"      type="button"      @click="changeTheme()"   >     {{ theme === 'light' ? 'Dark mode' : 'Light mode' }}   </button> </form>

? 提示：Vue 3 中 v-on:click 可简写为 @click；.prevent 是最常用且语义清晰的事件修饰符，强烈推荐优先使用。

? 完整可运行代码片段（关键部分修正后）

<!-- 在原有 HTML 中替换原 button --> <form class="d-flex">   <button      class="btn btn-primary"      @click.prevent="changeTheme()"   >     {{ theme === 'light' ? '? Dark mode' : '☀️ Light mode' }}   </button> </form>

同时建议优化 changeTheme 方法，使其具备状态翻转逻辑，提升可维护性：

methods: {   changeTheme() {     this.theme = this.theme === 'light' ? 'dark' : 'light';   } }

⚠️ 注意事项与最佳实践

• 避免在
  中使用无 type 的

  ：除非明确需要提交行为，否则始终指定 type=”button”。

• 检查 Bootstrap 版本兼容性：Bootstrap 5+ 的 bg-light/bg-dark 和 navbar-light/navbar-dark 类已弃用，当前推荐直接使用 bg-{theme} + navbar-{theme} 组合（如示例中 bg-light / bg-dark），确保 CSS 类名与 Bootstrap 文档一致。
• 持久化主题（进阶）：若需刷新后保留主题，可在 changeTheme() 中同步写入 localStorage，并在 data() 初始化时读取：

  data() {   return {     theme: localStorage.getItem('theme') || 'light',     // ...   } }, methods: {   changeTheme() {     this.theme = this.theme === 'light' ? 'dark' : 'light';     localStorage.setItem('theme', this.theme);   } }