1

Tengo un select con vue js definido:

dacademics:[
            {text:'Persona Natural',value:'PN'},
            {text:'Bachiller',value:'Bach'},
            {text:'Profesional',value:'Prof'},
            {text:'Técnico Especializado',value:'TE'},
            {text:'Técnico Administrativo',value:'TA'},
            {text:'Obrero A',value:'OA'},
            {text:'Obrero B',value:'OB'}],

y en la vista lo cargo el select de la siguiente manera.

<select v-model="dacademic" class="form-control" style="height: 35.9px;" placeholder="Seleccione" id="sdacademic">
    <option value="" disabled hidden>Seleccione Grado</option>
    <option v-for="gradoac in dacademics" v-bind:value="gradoac.value">
                                @{{ gradoac.text }}
    </option>
</select>

tambien tengo una variable monto total: que es definida de la siguiente manera

newContrato:{CONT_intTiempoContrato:'',CONT_varProfesion:'',CONT_varGradoAcademico:'',CONT_douMontoTotal:'',CONT_intArmadas:'',META_intId:'',PERS_varDNI:'',CONT_datInicio:'',CONT_datFin:'',productos:[],personaSeleccionada:''},

y en la vista lo llamo así:

<div class="col-md-4">
            <label for="CONT_douMontoTotal">Monto Total</label>
            <input class="form-control" id="CONT_douMontoTotal" type="number" aria-describedby="nameHelp" placeholder="Ingrese el  total" v-model="newContrato.CONT_douMontoTotal" min="1" max="13800">
</div>

lo que necesito hacer es: cuando selecciono por el ejemplo Persona Natural que el valor del monto total se altere a 1000, si selecciono bachiller que se cambie a 2000, etc. me gustaria saber si se puede hacer algo como

v-on:focusout.prevent="cambiarMonto()"

o alguna manera para ejecutar esto desde el codigo en vue js, intente solo con js, pero solo cambia un momento ya que el v-model=newContrato.CONT_douMontoTotal:'' esta vacio

2
  • Probaste con un watch sobre gradoac.value?
    – gbianchi
    el 11 abr. 2018 a las 14:25
  • @gbianchi podrías darme una mano aun no utilice watch
    – hans
    el 11 abr. 2018 a las 14:43

2 respuestas 2

1

Prueba agregando un watch en tu export default

La idea es que un watch es una propiedad que esta monitoreando si una variable cambia de valor, y ejecuta un procedimiento cuando ella cambia.

Por lo tanto, podrias hacer algo asi:

export default {.....
    watch: {
        gradoac(){
             cambiarMonto();
        }
    }
}

La funcion cambiarMonto, no tiene por que estar definida afuera, podrias hacer lo mismo adentro del watch.

0

Hice algo asi y por ahora funciona:

watch:{
        //
        dacademic : function(){

            switch (this.dacademic) {
                case 'PN':
                    this.newContrato.CONT_douMontoTotal='5700';
                    break;
                case 'Bach':
                    this.newContrato.CONT_douMontoTotal='9300';
                    break;
                case 'Prof':
                    this.newContrato.CONT_douMontoTotal='10500';
                    break;
                case 'TE':
                    this.newContrato.CONT_douMontoTotal='7800';
                    break;
                case 'TA':
                    this.newContrato.CONT_douMontoTotal='6900';
                    break;
                case 'OA':
                    this.newContrato.CONT_douMontoTotal='5700';
                    break;
                case 'OB':
                    this.newContrato.CONT_douMontoTotal='5400';
            }
        }
    }

y este es el select:

<select v-model="dacademic" class="form-control" style="height: 35.9px;" placeholder="Seleccione" id="sdacademic">
    <option value="" disabled hidden>Seleccione Grado</option>
    <option v-for="gradoac in dacademics" v-bind:value="gradoac.value">
                                @{{ gradoac.text }}
    </option>
</select>

Gracias @gbianchi

1
  • marca la respuesta como aceptada para ayudar a mantener la buena salud del sitio, gracias :D
    – fredyfx
    el 20 feb. 2019 a las 0:27

Tu Respuesta

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

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