在 Javascript 中的 setAttribute 后重新加载页面

Question

我创建了一个简单的 function 以使用 VueJS 从页面的浅色模式切换到深色模式，但我的问题不是因为他，这里是代码：

    <a @click="toggleTheme"  class="switch-mode" href>
      <div class="switch-mode-btn">

      </div>
    </a>

toggleTheme() {
    let currentTheme = localStorage.getItem('theme');
    currentTheme == 'darkMode' ? currentTheme = '' : currentTheme = 'darkMode';

    document.documentElement.setAttribute('data-theme', currentTheme);
    localStorage.setItem('theme', currentTheme);
}
mounted() {
    let localTheme = localStorage.getItem('theme');
    document.documentElement.setAttribute('data-theme', localTheme);
},

css

:root {

    /* LIGHT MODE */
    --background-color: #fcfcfc;
    --text-color: rgba(17, 24, 39);
    /* END LIGHT MODE */
}

[data-theme="darkMode"] {
    /* DARK MODE */
    --background-color: rgba(17, 24, 39);
    --text-color: #fcfcfc;
    /* END DARK MODE */
}

为什么，当我启动我的toogleTheme function 时，我的页面被重新加载？ 我想动态执行此操作但不刷新我的页面:(

谢谢你的帮助

Answer 1

Solution 1:

调用方法时使用.prevent修饰符

<a @click.prevent="toggleTheme"  class="switch-mode" href>
   <div class="switch-mode-btn">

   </div>
</a>

您可以在文档中阅读有关修饰符的更多信息：事件修饰符

Solution 2:

只需从<a>标记中删除href属性

Answer 2

从a标签中删除href 。 空的href导致重新加载。