0

Tengo problemas con mi modal vue. El submit del formulario contenido en el modal me funciona correctamente desde el segundo click del boton. Es decir, tengo que clickear 2 veces para que el submit se ejecute.

MODAL

Vue.component('modal',{

template: `

        <div class="modal-mask" >
          <div class="modal-wrapper">
            <div class="modal-container">

              <div class="modal-header">
                
              </div>

              <div class="modal-body">
          
                  <form  id="form-login" @submit.prevent="submit" action="{% url 'company_update' %}" method="GET">
                    <div class="input-container">
                        <label for="username">Email or Username</label>
                        <input type="text" id="username" name="username" required class="form-control"/>
                    </div>
                    <div class="input-container">
                        <label for="password">Password</label>
                        <input type="password" id="password"  name="password" required class="form-control"/>
                    </div>
                    <div class="input-container">
                        <input type="checkbox" name="remember" value="true" id="remember" />
                        <label for="remember">Remember me</label>
                    </div>
                    <div class="submit-container">
                        <button type="submit" class="btn btn-primary btn-login">SIGN IN</button>
                    </div>
                  </form>
         
              </div>

               <h2><span>or</span></h2>  
               <div class="social-signin">
                    <a href="#" class="facebook">Sign in with Facebook</a>
                    <a href="#" class="google">Sign in with Google+</a>
                </div>

              <div class="modal-footer">
              
                  <p>Need an account? <a href="sign-up">Sign up here.</a></p>
                  <button class="modal-default-button" @click="$emit('close')">
                    OK
                  </button>
               
              </div>
            </div>
          </div>
        </div>

Acá aplico la funcion Submit del componente

methods:{
submit: function () {

    $(document).ready(function() {
            $("#form-login").validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true,
                    }
                },
                submitHandler: function(form) {
                    var self = this;
                    //var url = "{% url 'search' %}";
                    localStorage.setItem('jwt_token', "");
                    localStorage.setItem('jwt_refresh', "");
                    login({
                        username: $("#username").val(),
                        password: $("#password").val()
                    }, function(r) {
                        if (r) {  //Aqui me logueo 

Aca llamo el Modal a través de una funcion del objeto VUE

<a  ref="enlace" :href="'/company/'+item.company.nameSearch+'/'+item.nameSearch" @click.prevent="geturl" class="item-image" id='a-modal' >

Asi esta inicializado mi objeto VUe (donde el modal lo dejo sin activar)

var app_vue = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
  count: 0,
  search: '',
  url: '',
  showModal: false,
},

Esta es la funcion geturl

geturl: function () {
        app_vue.showModal = true;
    }

Finalmente este es el componente en si:

<modal v-if="showModal"   @close="showModal = false" url="{% url 'company_update' %}">
            
              you can use custom content here to overwrite
              default content
            
     
        </modal>

Yo he pensado que es el @submit.prevent="submit" del form del modal, pero si lo quito no me funciona nada. Que creen que pueda ser?.......

Gracias !!

2 respuestas 2

0

Recomendaría enviar el formulario desde una función en el mounted() de Vue. Desde el formulario solo haces el @click.prevent="YourMethod". De esa forma haces todo desde tu función.

La otra forma es asignar un v-model a cada campo y dispar tu función con un on:click desde el botón de subtmit.

2
  • Gracias Yeison. No entendi tus recomendaciones. Podrías explicarlo con un ejemplo de codigo?. Actualice la pregunta y pegué el "Method" del componente donde manejo el submit......muchas gracias!! el 27 ago. 2020 a las 16:32
  • Mm si buscas un poco de solución rápida, te podría servir la solución de Moisés. Sin embargo, ten cuidado con el manejo de Jquery con VueJS, ya que Vue es tan potente que no necesita de Jquery para sus funcionalidades. el 28 ago. 2020 a las 2:48
0

Listo arreglado. El problema pasaba porque en Methods: del componente tenia la funcion "Submit" y despues utilizaba un SubmitHanddler de jquery. Habia doble validacion.

methods:{
    submit: function (form) {
    //console.log("paso por el 1er submit");


            $("#form-login").validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true,
                    }
                }
            });


            var self = this;
            //var url = "{% url 'search' %}";
            localStorage.setItem('jwt_token', "");
            localStorage.setItem('jwt_refresh', "");
            login({
                username: $("#username").val(),
                password: $("#password").val()
            }, function(r) {

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.