在Javascript中设置属性后重新加载页面答案

【问题标题】：Reloaded page after setAttribute in Javascript在Javascript中设置属性后重新加载页面
【发布时间】：2021-06-18 06:17:52
【问题描述】：

我使用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 函数时，我的页面会重新加载？我想动态执行此操作但不刷新我的页面:(

感谢您的帮助

【问题讨论】：

如何调用toggleTheme 方法？你使用的是 vue cli 还是 cdn？
@MohammadMasoudi 我在帖子顶部添加代码

标签： javascript html css vue.js dom

【解决方案1】：

`Solution 1 :`

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

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

   </div>
</a>

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

`Solution 2 :`

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

【讨论】：

【解决方案2】：

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

【讨论】：