0

Tengo este problema. Utilizo javascript Vue y vuex

objeto:

{
  idioma: {
    es_mx: {
      titulo: "hola mundo"
    }
  }
}

Se que para imprimirlo o modificarlo basta con lo siguiente:

console.log(idioma.es_mx.titulo);

Pero por cuestiones de lógica y compactar el código. Quiero hacer un actualizador globalizado.

Mandaría a llamar a una función de la siguiente forma.

update_info('idioma.es_mx.titulo', 'Este es un nuevo texto');

function update_info(key, value){
  let point = data.point.split(".");
  switch (point .length) {
        case 1:
          state[point[0]] = value
          break;
        case 2:
          state[point[0]][point[1]] = value
          break;
        case 3:
          state[point[0]][point[1]][point[2]] = value
          break;

        case 4:
          state[point[0]][point[1]][point[2]][point[3]] = value
          break;
        case 5:
          state[point[0]][point[1]][point[2]][point[3]][point[4]] = value
          break;

      }

}

Esto resuelve el problema de forma practica y poco elegante.

Quisiera poder recorrer los puntos para generalizar el objetivo de la función.

Esto lo estoy ocupando en javascript.

Este es un ejemplo de lo que hace.

var el = new Vue(
{
el: "#app",
data: {
value:null,
  idiomas: {
    es: {
      titulo: "hola mundo"
    },
    en:{
      titulo: "hola mundo"
    }
  }
},
methods: {

update_values(key, value){
let dt = this.idiomas;

let point = key.split(".");
  switch (point .length) {
        case 1:
         dt[point[0]] = value
          break;
        case 2:
          dt[point[0]][point[1]] = value
          break;
        case 3:
          dt[point[0]][point[1]][point[2]] = value
          break;
        case 4:
          dt[point[0]][point[1]][point[2]][point[3]] = value
          break;
        case 5:
          dt[point[0]][point[1]][point[2]][point[3]][point[4]] = value
          break;
      }
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h3>Este es el mensaje que se modifica con un solo input</h3>
   <p>
    {{ idiomas.es.titulo }} 
   </p>
   <p>
    {{ idiomas.en.titulo }} 
   </p>
   
   <input v-model="value" type="text" @change="update_values('es.titulo', value)">
    
    <input  type="text" @change="update_values('en.titulo', value)">
</div>

Esto lo ocupo en una tienda de vuex.

1 respuesta 1

0

Reescribiendo la función update_values así pienso que te servirá:

update_values(key, value) {
  const keys = key.split('.');
  let i, dt = this.idiomas;
  for (i = 0; i < keys.length-1; i++) {
    dt = dt[keys[i]];
  }
  dt[keys[i]] = value;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.