0

Estoy haciendo un pequeño ejercicio en vue js en el cual quiero comparar cual es el salario neto de una persona según su lugar de residencia, esto por medio de un Arrays de objetos y para calcular el salario estoy utilizando un computed. Para poder hacerlo dinamico necesito poder extraer de forma dinamica el porcentaje de las cargas sociales que tiene el pais pero tengo problemas para extraer el dato "cargas" que esta dentro del objeto pais.

<label>Cual es tu pretención salarial en dolares?</label>
<input type="number" class="form-control" v-model="salarioBruto">

<label>Selecciona el Pais?</label>
<select v-model="seleccion" class="form-control mb-3">
    <option v-for="salario in salarios" v-bind:value="salario.pais">
      {{ salario.pais }}
    </option>
</select>


<ul class="list-group list-group-flush" v-for="salario in salarios" v-if="seleccion == salario.pais">
    <li>Su Salario Bruto es : ${{salarioBruto}}</li>
    <li>Su Salario Neto es  : ${{salarioNeto}}</li>
</ul>
new Vue({
    el: '#gss',
    data: {

        seleccion: '',
        salarioBruto:0,
         
        salarios: [
          { pais: 'Argentina', cargas:'25.5' },
          { pais: 'Bolivia', cargas: '21.6' },
          { pais: 'Chile', cargas: '22.6'},
          { pais: 'Colombia', cargas: '33' },     
        ],

    },

    computed: {

        salarioNeto() {
 
            return  this.salarioBruto - (( this.salarioBruto * this.salarios.cargas )/100)  ;

        }

    },

});
2
  • que error tienes? no entiendo cual es el error?
    – JPRLCol
    el 20 ago. 2020 a las 5:22
  • hola el error esta en """this.salarios.cargas """" no es la manera correcta de cargar ese dato al estar dentro de un objeto el dato llega vacio " NAN " el 20 ago. 2020 a las 21:31

3 respuestas 3

0

en el computed, estas multiplicando salarioBruto * (undefined) ya que salarios es un array, por tanto este array no tiene el atributo cargas, quien tiene el atributo cargas es un elemento de este array, primero tendrías que recuperar el elemento cuando se seleccione el país y luego hacer el calculo con ese valor.

También como recomendación, en vue es un mala practica usar el v-if en la misma etiqueta donde usas la directiva v-for, podrías mejorar eso.

0

Al usar valores dentro de computed de debe usar la palabra this

quedaria:

<ul class="list-group list-group-flush" v-for="salario in salarios" v-if="seleccion == salario.pais">
    <li>Su Salario Bruto es : ${{this.salarioBruto}}</li>
    <li>Su Salario Neto es  : ${{this.salarioNeto}}</li>
</ul>

los valores en computed no son métodos sino que quedan expuestas como variables locales

1
  • @BetaM done, por que quedan como variables loales
    – JPRLCol
    el 21 ago. 2020 a las 1:44
0

si en lugar de usar el computed utilizo los datos como variables locales estaria correcto hacer la operación de esta manera o seria una mala practica?

y con respecto al v-if y al V-for en la misma etiqueta se resolveria poniendo el v-for en un contenedor ?

<div class="results" v-for="salario in salarios">
    <ul class="list-group list-group-flush" v-if="seleccion == salario.pais">
        <li>Su Salario Bruto es : ${{salarioBruto}}</li>
        <li><span >Su Salario Neto es  : {{ salarioBruto - (salarioBruto * salario.cargas)/100 }}</span> </li>
    </ul>
</div>

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.