Navbar主题切换异常：点击深色模式按钮后主题自动恢复

问题出在主题切换按钮被包裹在<form>标签内，点击按钮时会触发表单的默认提交行为，导致页面刷新，Vue实例重新初始化，theme状态被重置为初始的light，所以主题仅切换1秒就恢复原样。

修复方案（二选一即可） #

方案1：阻止按钮的默认提交行为 #

给按钮的click事件添加.prevent修饰符，拦截表单提交的默认行为：

<form action="" class="d-flex">
    <button class="btn btn-primary" v-on:click.prevent="changeTheme()">dark mode</button>
</form>

方案2：移除不必要的<form>标签 #

此处仅需一个功能按钮，无需表单提交功能，直接删除<form>标签，改用普通容器包裹按钮：

<div class="d-flex">
    <button class="btn btn-primary" v-on:click="changeTheme()">dark mode</button>
</div>

效果验证 #

修改后点击按钮，页面不会刷新，theme状态会正常切换并保留，Navbar主题将稳定保持为切换后的模式。

内容的提问来源于stack exchange，提问作者Bruno Gustavo