Javascript Vue.js-需要在不重新加载的情况下切换方向（rtl到ltr，反之亦然）

我正在使用Vue.js和Vue-i18n在我的项目上切换语言，而无需刷新。然而，当我想在阿拉伯语和其他语言之间切换时，我需要将网站的设计从（从右到左）更改为（从左到右），反之亦然

它当前已创建，因此我需要刷新以加载我的rtl.scss文件：

这是刷新时加载css的代码：

let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  require('rtl.scss')
}

这是使页面刷新的代码：

if (newLocale === 'ar' || oldLocale === 'ar') {
  window.location.reload()
}

---

根据Jacob Goh的评论，您可以执行以下操作：

将第一个代码段更改为：

require('rtl.scss')
let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

其次是：

if (newLocale === 'ar' || oldLocale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

最后，将rtl.scss文件编辑为：

body.rtl {
  /* Old scss */
}

---

一种方法是在

中添加/删除一个类，并根据不同的主体类使用不同的CSS。这行不通！！您必须向app root元素添加一个类，并相应地设置其样式。或者，您必须手动将

标记附加到带有纯文本的正文中js@shakee93谢谢老兄，我以前试过，但它对我不起作用。谢谢Jacob Goh和Issam Rafihi的详细说明，它很有魅力。