Bagaimana untuk menukar arah halaman dalam Vue tanpa memuat semula halaman

Question

Saya mahu dapat menukar orientasi halaman apabila nilai berubah dalam Pinia, kod berjalan dengan baik tetapi halaman dimuat semula dan saya tidak mahu halaman dimuat semula.

Ini adalah App.vuefail

saya

<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>

Answer 1

Memerlukan pengikatan data biasa. Dalam kes ini, gunakan pemerhati.

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

Sila pastikan untuk tidak mengakses document semasa pemaparan sebelah pelayan.

Answer 2

Cuba letak kandungan anda dalam elemen lain daripada mengubah suainya document. Selain itu, gunakan sifat yang dikira untuk responsif.

<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>