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

Posted 2023-02-22

【中文标题】在Javascript中设置属性后重新加载页面

【英文标题】：Reloaded page after setAttribute in 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 我在帖子顶部添加代码

【参考方案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 导致重新加载。