I need to update the bt.name_en, bt.text_en, and bt.date_en whenever the LocalStorage value changes (
const local = localStorage.getItem("inLan");If the value of
const local (const local = localStorage.getItem("inLan");name_jp, then the name, text, and date should be updated to "JP" (bt.name_jp, bt.text_jp, and bt.date_jp). How can I achieve this in an efficient and accurate manner?
<template>
<div class="about">
<Header />
<div class="line">
<ul>
<li v-for="bt in list" :key="bt.id">
<div class="line-cont">
<h2 class="dateX" >{{ bt.date_en }}</h2>
<h1>{{ bt.name_en }}</h1>
<p>{{ bt.text_en }}</p>
<div class="divm">
<img class="img" :src="bt.image" alt="">
</div>
</div>
</li>
</ul>
</div>
<Footer />
</div>
</template>
<script>
import { computed } from "vue";
import { l } from "@/modules/languages";
import useAb from "@/modules/About";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
name: "About",
components: {
Header,
Footer,
},
setup() {
const cards = useAb();
const list = computed(() => cards.state.abouts);
const local = localStorage.getItem("inLan");
return {
l,
list,
local,
};
},
};
</script>