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