How to empty the values of the attributes of an object in VUEJS2?

Question

How to empty the values of the attributes of an object in VUEJS2?

Navigation

#1 by (3 votes)

0

In vuejs2 I have a variable datos which is an object that already has some properties set and that are initially empty.

I'm doing a series of validations that are very repetitive, an example of this is to send a request, if it brings information the 'set' in the object datos if not (here comes the 'inconvenient'), I have to put the object again and put them in a vacuum.

EXAMPLE:

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: '',
      }
    }
  });
});

PROBLEM
You can see that I use constantly:

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

The idea is to be able to optimize that in such a way that you do not have to put Constantly the same, I tried to put Employee.info_emloyees = {} but I could say that it 'erases' the parameters and leaves the fix totally empty and the idea is that clean are the properties.

javascript ajax post vue.js

asked by JDavid 12.12.2018 в 20:09

source

1 answer

Modify DropDownList MVC using Users? Pass different values from the same button

score 3 · Accepted Answer

The simplest way would be to create a method within the object that resets the values as you want them:

example:

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: '',
                  }
    }
  }
})

then you can use it like any other method:

Employee.reset()