If the "const local (const local = localStorage.getItem("key");" is equal to "name_jp", then change the "card.name_en" to "card.name_jp" which is inside the span tag. How can I do this effectively and correctly?
***Sorry for my bad English
<div class="b-card" v-for="card in list" :key="card.id">
<span class="span" id="name">
<span class="span2">+</span> {{ card.name_en }}</span>
</div>
</div>
</div>
</template>
<script>
import { computed } from "vue";
import { lan } from "@/modules/languages";
import useCards from "@/modules/geral";
export default {
setup() {
const cards = useCards();
const list = computed(() => cards.state.details);
const local = localStorage.getItem("key");
return {
list,
lan,
local,
};
Just add computed getter for this field:
setup() {
const cards = useCards();
const list = computed(() => cards.state.details);
const local = localStorage.getItem("key");
const localizedName = computed(() => (card) => {
if (local === 'jp') {
return card.name_jp
} else {
return card.name_en
}
})
return {
list,
lan,
local,
localizedName,
};
}
And use it as:
<span class="span2">+</span> {{ localizedName(card) }}</span>
Note that changing the value in localStorage does not redraw the component. The localStorage.getItem('key') is not a reactive property; therefore, each change must be accompanied by a redrawing of the component. Alternatively, you can use, for example, the useLocalStorage from the vueuse. This will help make the local values reactive:
setup() {
const cards = useCards();
const list = computed(() => cards.state.details);
const local = useLocalStorage("key");
const localizedName = computed(() => (card) => {
if (local.value === 'jp') {
return card.name_jp
} else {
return card.name_en
}
})
return {
list,
lan,
local,
localizedName,
};
}