Si "const local (const local = localStorage.getItem("key");" es igual a "name_jp", cambie "card.name_en" a "card.name_jp" que está dentro de la etiqueta span. ¿Cómo puedo hacer esto de manera efectiva y correcta?
***Perdón por mi mal ingles
<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, };Simplemente agregue captador calculado para este campo:
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, }; }Y usarlo como:
<span class="span2">+</span> {{ localizedName(card) }}</span> Tenga en cuenta que cambiar el valor en localStorage no vuelve a dibujar el componente. localStorage.getItem('key') no es una propiedad reactiva; por lo tanto, cada cambio debe ir acompañado de un rediseño del componente. Alternativamente, puede usar, por ejemplo, useLocalStorage de vueuse . Esto ayudará a que los valores local sean reactivos:
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, }; }