0

mi problema principal es que tengo un modal, dentro de ese modal tengo algunos inputs y en 1 de esos inputs un datepicker, el problema estaba que al momento de escribir en cualquier otro input el valor que estaba dentro del input con el datepicker se borraba, como si se estuviera restaurando cada vez que escribia en un input. Código del input con datepicker:

 <div class="form-group">
                            <label>FECHA DE PESADO DE RESIDUOS</label>
                            <input name="fecha_hora_captura" id="fechadatepicker" v-model="fecha_hora_captura" class="form-control" type="text" placeholder="FECHA" autofocus>
                        </div>

el script:

  $("#fechadatepicker").datepicker({format: 'yyyy-mm-dd', todayHighlight: true, autoclose: true, lenguage: "es",});

El tema es que logre "reparar" el problema, con la siguiente función:

  guardarFecha: function(){
            this.fecha_hora_captura = $('#fechadatepicker').val();
        }

Básicamente guardo el valor dentro del datepicker en la variable, y esa misma variable la coloque al input, me funciona bien, el detalle esta en que para poder llamar a esa función utilizo un evento click dentro de mis otros inputs:

 v-on:click="guardarFecha()"

De esa manera el usuario cada vez que use un click dentro del input guardara el valor del datepicker y este ya no se borrara, mi problema esta en que el usuario podría no dar click dentro de los inputs, y simplemente usar TAB, para moverse de un input a otro, y lo que pienso es usar un "v-on:keyup" para ejecutar la función que guarda el valor del datepicker, como el usuario escribe tanto texto como números dentro de los inputs mi intención es que la función se ejecute con cualquier tecla que presione el usuario dentro del input, a lo que viene mi pregunta, ¿ES POSIBLE HACER ESO? o algo similar? les dejo un ejemplo de uno de mis inputs:

 <div class="form-group col-xs-12 col-md-6">
                                <label> NÚMERO DE TARIMAS </label>
                                <input v-on:click="guardarFecha()" name="numero_pallets" id="numero_pallets" v-model="numero_pallets" v-on:keyup.enter="focus('nombre_chofer')" type="number" class="form-control" placeholder="INGRESE EL NÚMERO DE TARIMAS">
                            </div> 

Y les dejo una imagen de mi modal:

MODAL

AGRADEZCO DE ANTEMANO SUS RESPUESTAS!!

EJEMPLO MÍNIMO VERIFICABLE:

 <script>
var app = new Vue({
    el: '#app',
    data: {
        tienda: "",
        fecha_hora_captura: "{{$fecha}}", //fecha es una variable de PHP con la fecha de hoy.
        carton: "",
        emplaye: "",
        numero_pallets: "",
        nombre_chofer: "",
        numeroCaja: "",
        observaciones: "",
        url: "",
        alert: null
    },
    created: function(){
     this.obtainUrl();
     this.tienda = $('#tienda').val();
    },
    methods:{
        obtainUrl: function(){
         var urlCompleta = window.location.toString();
         var pos = urlCompleta.search("public");
         var res = urlCompleta.slice(0, (pos + 6));
         this.url = res;
        },
        guardarMaterial: function(){
            //this.fecha_hora_captura = $('#fechadatepicker').val();
            this.seleccionarChofer();
            var r = confirm("¿Esta seguro de guardar la información introducida?");
            if(r == true){
               this.guardarFecha();
                var vm = this;
                axios({
                    method: 'post',
                    url: vm.url + '/residuosRevalorizables/guardar',
                    data: {
                        tienda: vm.tienda,
                        fecha_hora_captura: vm.fecha_hora_captura,
                        carton: vm.carton,
                        emplaye: vm.emplaye,
                        numero_pallets: vm.numero_pallets,
                        nombre_chofer: this.nombre_chofer,
                        numeroCaja: vm.numeroCaja,
                        observaciones: vm.observaciones
                    }
                })
                .then(function (response){
                    console.log(response);
                    vm.alert =  new Object();
                    vm.alert.type = response.data.respuesta;
                    vm.alert.message = response.data.mensaje;
                    vm.alert.errors = response.data.errores;
                    
                    if(vm.alert.type == "success"){
                        vm.alert = null;
                        location.reload();
                    }else if(vm.alert.type == "warning"){
                        vm.alert.title = "Advertencia";
                    }else if(vm.alert.type == "danger"){
                        vm.alert.title = "Error";
                    }
                })
                .catch(function (error){
                    console.log(error);
                })
                .then(function (){

                });
            }
        },
        closeAlert: function(){
         this.alert = null;
        },
        seleccionarChofer: function(){
            this.nombre_chofer = document.getElementById('nombre_chofer').value; 
            this.capturarFecha();
        },
 //Función capturarFecha se ejecuta al abrir el modal.
        capturarFecha: function(){
            $("#fechadatepicker").datepicker({format: 'yyyy-mm-dd', todayHighlight: true, autoclose: true, lenguage: "es",});
        },
        guardarFecha: function(){
            this.fecha_hora_captura = $('#fechadatepicker').val();
        },
        closeModal: function(){
            $('#myModalAddMaterial').modal('hide');
            this.closeAlert();
            this.reset();
        },
        reset: function(){
        this.tienda = "";
        this.fecha_hora_captura = "{{$fecha}}"; //fecha es una variable de PHP con la fecha de hoy.
        this.carton = "";
        this.emplaye = "";
        this.numero_pallets = "";
        this.nombre_chofer = "";
        this.numeroCaja = "";
        this.observaciones = "";
        },
        focus: function(idInput){
            if(idInput != "save"){
                document.getElementById(idInput).focus();
            } else {
                this.guardarMaterial();
            }
        },
    },
    computed: {
        classHtml: function(){
            return "alert alert-" + this.alert.type + " alert-dismissible";
        }
    }
})

Este es el modal completo:

  <!--MODAL-->
    <div class="modal fade" id="myModalAddMaterial" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button v-on:click="closeAlert()" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">NUEVO DOCUMENTO</h4>
                </div class="modal-header">
                <!--Cuerpo del modal-->
                <div class="modal-body">
                    <!--Alert-->
                    <div v-if="alert != null" v-bind:class="classHtml" role="alert">
                        <button v-on:click="closeAlert()" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>¡@{{alert.title}}!</strong> @{{alert.message}}
                        <ul>
                            <li v-for="(item, index) in alert.errors" v-bind:key="index">@{{item}}</li>
                        </ul>
                    </div>

                    <form autocomplete="off">
                       {{ csrf_field() }}
                        <input name="centro" id="tienda" v-bind:value="{{Session::get('key')[0]}}" type="hidden" class="form-control">
                        <div class="form-group">
                            <label>FECHA DE PESADO DE RESIDUOS</label>
                            <input name="fecha_hora_captura" id="fechadatepicker" v-model="fecha_hora_captura" class="form-control" type="text" placeholder="FECHA" autofocus>
                        </div>
                        <!--Segunda fila-->
                        <div class="row">
                            <div class="form-group col-xs-12 col-md-6">
                                <label>CARTÓN (KG)</label>
                                <input v-on:click="guardarFecha()" name="carton" id="carton" v-model="carton" v-on:keyup.enter="focus('emplaye')" type="text" class="form-control" placeholder="INGRESE EL PESO DEL CARTÓN">
                            </div>
                            <div class="form-group col-xs-12 col-md-6">
                                <label>EMPLAYE (KG)</label>
                                <input v-on:click="guardarFecha()" name="emplaye" id="emplaye" v-model="emplaye" v-on:keyup.enter="focus('numero_pallets')" type="text" class="form-control" placeholder="INGRESE EL PESO DEL EMPLAYE"> 
                            </div>
                            <!--Tecera fila-->
                         <div class="row">
                            <div class="form-group col-xs-12 col-md-6">
                                <label> NÚMERO DE TARIMAS </label>
                                <input v-on:click="guardarFecha()" name="numero_pallets" id="numero_pallets" v-model="numero_pallets" v-on:keyup.enter="focus('nombre_chofer')" type="number" class="form-control" placeholder="INGRESE EL NÚMERO DE TARIMAS">
                            </div>
                            <div class="form-group col-xs-12 col-md-6">
                                <label>NOMBRE DEL CHOFER</label>
                                    <select name="nombre_chofer" id="nombre_chofer" class="form-control" :options="nombre_chofer">
                                        <option value="" selected disabled>NOMBRE DEL CHOFER</option>
                                        @foreach ($text as $cho)
                                        <option v-model="nombre_chofer">{{$cho->nombre}}</option>
                                        @endforeach
                                    </select>
                            </div>
                        </div>
                        <!--Cuarta fila-->
                        <div class="row">
                            <div class="form-group col-xs-12 col-md-6">
                                <label>CAJA</label>
                                <input v-on:click="guardarFecha()" name="numeroCaja" id="numeroCaja" v-model="numeroCaja" v-on:keyup.enter="focus('observaciones')" type="number" class="form-control" placeholder="NÚMERO DE CAJA">
                            </div>
                            <div class="form-group col-xs-12 col-md-6">
                                <label>DESCRIPCIÓN</label>
                                <input v-on:click="guardarFecha()" name="observaciones" id="observaciones" v-model="observaciones" v-on:keyup.enter="focus('save')" type="text" class="form-control" placeholder="INGRESE UNA DESCRIPCIÓN">
                            </div>
                        </div>    
                      </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button v-on:click="closeModal()" type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button v-on:click="guardarMaterial()" type="button" class="btn btn-primary">GUARDAR</button>
                </div>
            </div>
        </div>
    </div>
6
  • 1
    porque usas jquery si esto es vue? deberias reparar el problema de que se pierda el valor, porque ese valor si esta bien definido, no deberia perderse.. estas buscando un workaround de un error que no deberia suceder (y ese es el que tenes que resolver)
    – gbianchi
    el 23 oct. 2020 a las 17:40
  • Hola, pues, soy un novato en el tema de la programación web, estuve unos dias intentanto encontrar ese error, y unicamente me sucede dentro del modal, fuera del modal me funciona totalmente normal, es por eso que investigando un poco pude repararlo de esa manera. el 23 oct. 2020 a las 17:47
  • pero si estas usando vue, no debes usar nada, pero nada de jquery... de todo eso se encarga vue... si tu valor esta en el data, no deberia perderse, a menos que alguien mas este modificando ese valor. te recomiendo hacer un ejemplo mínimo verificable para que te podamos ayudar. Tambien te recomiendo que leas la documentacin de vue,que es clara y muy buena..
    – gbianchi
    el 23 oct. 2020 a las 17:53
  • Ok, ahora mismo edito mi pregunta. el 23 oct. 2020 a las 17:58
  • fecha_hora_captura: "{{$fecha}}" no esta bien.... cuando obtenes ese valor, se lo seteas y listo... eso, para vue, es una cadena.. no es un valor... te recomendaria, que leyeras como funciona vue.. hay muchas cosas que estan mal en tu codigo, porque usas vue, pero haces muchas cosas que vue hace solo.por ejemplo, no deberias hacer nunca esto: this.nombre_chofer = document.getElementById('nombre_chofer').value; el input nombre chofer deberia estar conectado a esa variable por el v=model
    – gbianchi
    el 23 oct. 2020 a las 18:11

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.