How to change the page direction in Vue without refreshing the page
P粉333395496
P粉333395496 2023-09-11 16:48:55
0
2
604

I want to be able to change the orientation of the page when the value in Pinia changes, the code runs fine but the page will reload and I don't want the page to reload.

This is my App.vueFile

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

theme.value === "dark" ? document.documentElement.classList.add("dark") : false; //works
language.value === 'ar' ? document.documentElement.setAttribute('dir','rtl'): false // 需要重新加载页面
</script>

<template>
  <router-view></router-view>
</template>
P粉333395496
P粉333395496

reply all(2)
P粉274161593

Requires regular data binding. In this case, use an observer.

watch(
  language,
  value => {
   if (value === 'ar')
     document.documentElement.setAttribute('dir','rtl')
   else 
     document.documentElement.removeAttribute('dir')
  },
  { immediate: true }
)

Please make sure not to access document when rendering on the server side.

P粉317679342

Try placing your content in another element instead of modifying the document. Additionally, use computed properties for responsiveness.

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

const direction = computed(() => language.value === 'ar' ? 'rtl' : 'auto')
</script>

<template>
  <div :class="theme" :dir="direction">
    <router-view></router-view>
  </div>
</template>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template