0

En vuejs2 tengo una variable datos la cual es un objeto que ya tiene unas propiedades establecidas y que inicialmente estan vacías.

Estoy realizando una serie de validaciones que son muy repetitivas, un ejemplo de ello, es enviar una petición, si esta trae información las 'seteo' en el objeto datos si no (aqui viene el 'incoveniente'), tengo que poner el objeto nuevamente y ponerlos en vacio.

EJEMPLO:

var Employee = new Vue({
  el: '#content',
  data: {
    datos: {
      time_elapsed: '',
      employee: '',
      entry_date: '',
      entry_hour: '',
      exit_date: '',
      exit_hour: '',
      hour_value: '',
    }
  },
  methods: {
    registerEmployee: function(e){  
      e.preventDefault();
      if (Employee.code) {
        $.post('Employee/setEmployee', {'code': Employee.code}, function(json) { 
          if(json){
            Employee.msg = ''
            Employee.info_emloyees.employee = json[0].name
            Employee.info_emloyees.entry_date = json[0].entry_date
            Employee.info_emloyees.entry_hour = json[0].entry_hour
            Employee.info_emloyees.exit_date = json[0].exit_date
            Employee.info_emloyees.exit_hour = json[0].exit_hour
            Employee.info_emloyees.hour_value = json[0].hour_value
            Employee.info_emloyees.time_elapsed = json.time_elapsed
            Employee.info_emloyees.total = json.total
          }else{
            Employee.msg = 'Este empleado no esta registrado en el sistema'
            Employee.info_emloyees = {
                    time_elapsed: '',
                    employee: '',
                    entry_date: '',
                    entry_hour: '',
                    exit_date: '',
                    exit_hour: '',
                    hour_value: '',
            }   
          }
        });
      } else{       
         Employee.info_emloyees = {
                  time_elapsed: '',
                  employee: '',
                  entry_date: '',
                  entry_hour: '',
                  exit_date: '',
                  exit_hour: '',
                  hour_value: '',
          }   
      }
    },
  },
  mounted: function(){
    this.getrates();
  },
});


$(function(){

$(document).on('click', '.print', function(){
   Employee.code = '';
    Employee.info_emloyees = {
            time_elapsed: '',
            employee: '',
            entry_date: '',
            entry_hour: '',
            exit_date: '',
            exit_hour: '',
            hour_value: '',
          }    
});


$('.code_e').keyup(function(e) {
    if (e.keyCode  == 8) {
      e.preventDefault();
      Employee.code = '';
      Employee.info_emloyees = {
              time_elapsed: '',
              employee: '',
              entry_date: '',
              entry_hour: '',
              exit_date: '',
              exit_hour: '',
              hour_value: '',
      }
    }
  });
});

PROBLEMA
Se puede ver que uso constantemente:

 Employee.info_emloyees = {
                    time_elapsed: '',
                    employee: '',
                    entry_date: '',
                    entry_hour: '',
                    exit_date: '',
                    exit_hour: '',
                    hour_value: '',
            } 

la idea es poder optimizar eso de tal manera que no tenga que poner constatemente lo mismo, he intentado poner Employee.info_emloyees = {} pero podria decir que me 'borra' los parametros y deja el arreglo totalmente vacio y la idea es que limpie son las propiedades.

1
  • 5
    respuesta muy rapida, escribe una funcion limpiar empleados, pon ese codigo repetitivo ahi, y llamala todas las veces que necesites limpiarlo
    – gbianchi
    Commented el 12 dic. 2018 a las 19:13

1 respuesta 1

3

la forma mas simple sería crear un método dentro del objeto que te resetee los valores a como los quieres:

ejemplo:

var Employee = new Vue({
  el: '#content',
  data: {
    datos: {
      //datos
    }
  },
  methods: {
  //otros métodos
    reset: function() {
      this.info_emloyees = {
                    time_elapsed: '',
                    employee: '',
                    entry_date: '',
                    entry_hour: '',
                    exit_date: '',
                    exit_hour: '',
                    hour_value: '',
                  }
    }
  }
})

luego puedes usarlo como cualquier otro método:

Employee.reset()
3
  • 1
    ojo esto es VUE.. no es un objeto.. no puede llamarlo desde afuera, y haciendolo de esa forma va a perder la reactividad....
    – gbianchi
    Commented el 13 dic. 2018 a las 13:41
  • 1
    por lo que entiendo, la reactividad ya está rota desde el momento en que coexisten las propiedades datos e info_emloyees, info_emloyees no está declarada en data; por lo que se ve en el código compartido está generada al vuelo, por lo tanto el watcher de vue no las conoce y no actuará acorde a eso, para mejorar el código habría que refactorizar bastante, a lo mejor me estoy equivocando, corregime si me equivoco @gbianchi, gracias por comentar :)
    – ramirozap
    Commented el 13 dic. 2018 a las 14:30
  • 2
    Apa no habia notado eso.. me quede mirando otras cosas y no me percate... Tenes toda la razon. Por ahi estaria bueno que agregues ese comentario en tu respuesta.
    – gbianchi
    Commented el 13 dic. 2018 a las 14:42

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.