es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo cambiar los valores de las propiedades del objeto a medida que cambian los valores del almacenamiento local?

¿Cómo puedo cambiar los valores de las propiedades del objeto a medida que cambian los valores del almacenamiento local?

01 Aug, 2023 Programación

Quiero cambiar los valores de bt.name_en, bt.text_en y bt.date_en cuando cambie el valor de LocalStorage (const local = localStorage.getItem("inLan");).

Si el valor de const local (const local = localStorage.getItem(“inLan”);) es igual a name_jp, entonces el nombre, el texto y la fecha cambian a “JP” (bt.name_jp, bt.text_jp y bt.date_jp) también. ¿Cómo puedo hacer esto de manera efectiva y correcta?

“`
<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<em>en }}</h2>
<h1>{{ bt.name</em>en }}</h1>
{{ bt.text_en }}
<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");

<pre><code>return {
l,
list,
local,
};
</code></pre>

},
};
</script>
“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar bt.name_en, bt.text_en y bt.date_en según cambie LocalStorage, se pueden seguir los siguientes pasos:

    1. Agregar una propiedad computada para currentLang que devolverá el lenguaje actual basado en el valor de local.
    setup() {
  const cards = useAb();
  const list = computed(() => cards.state.abouts);
  const local = localStorage.getItem("inLan");

  const currentLang = computed(() => {
    if (local === "name_jp") {
      return "jp";
    } else {
      return "en";
    }
  });

  return {
    l,
    list,
    currentLang,
  };
},
    1. Actualizar el código del template para renderizar dinámicamente el texto basándose en el valor de currentLang.
    <div class="line-cont">
  <h2 class="dateX">{{ bt[`date_${currentLang}`] }}</h2>
  <h1>{{ bt[`name_${currentLang}`] }}</h1>
  {{ bt[`text_${currentLang}`] }}
  <div class="divm">
    <img class="img" :src="bt.image" alt="">
  </div>
</div>

    Ahora, cuando cambie el valor de local, la propiedad computada currentLang se actualizará automáticamente y el texto para bt.name, bt.text y bt.date se renderizará según el valor de currentLang.

Comments are closed.