How to focus focus with a vue js element?

Question

How to focus focus with a vue js element?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a select with vue js defined:

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'}],

and in the view I charge the select as follows.

<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>

I also have a variable total amount: which is defined as follows

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

and in the view I call it like this:

<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>

What I need to do is: when I select by the example Natural Person that the value of the total amount is changed to 1000, if I select high school that is changed to 2000, etc. I would like to know if you can do something like

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

or some way to execute this from the code in vue js, try only with js, but only change a moment since the v-model = newContract.CONT_douMontoTotal: '' is empty

javascript vue.js vuex

asked by hans 11.04.2018 в 16:00

source

2 answers

Find an exact name in a text file with Bash Save better punctuation in a game

score 1 · Answer 1

Try adding a watch to your export default

The idea is that a watch is a property that is monitoring if a variable changes value, and executes a procedure when it changes.

Therefore, you could do something like this:

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

The changeMont function does not have to be defined outside, you could do the same inside the watch.

score 0 · Answer 2

I did something like that and for now it works:

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';
            }
        }
    }

and this is the 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>

Thanks @gbianchi