1

Tengo un formulario que envía, en Vue.js, mediante axios sin ningún problema los datos, y deseo que luego de enviado satisfactoriamente, se borre el contenido del los campos. He intentado con .reset() pero sin éxito, y por algún motivo no puedo hacer uso del formData normalmente. También estoy usando Bootstrap-vue para el maquetado responsive, vee-validate como validador y vue-material para el estilo de los campos.

HTML

<div class="form-section">
            <form @submit.prevent="validateBeforeSubmit" id="form">
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="name">nombre</label>
                            <md-input v-validate="'required'" type="text" name="name" id="name" v-model="name" :class="{'input': true, 'is-danger': errors.has('name') }"></md-input>
                            <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <md-field>
                            <label for="surname">apellido</label>
                            <md-input v-validate="'required'" type="text" name="surname" id="surname" v-model="surname"></md-input>
                            <span v-show="errors.has('surname')" class="error">{{ errors.first('surname') }}</span>
                        </md-field>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="identity">dni</label>
                            <md-input v-validate="'required'" type="number" name="identity" id="identity"  v-model="identity"></md-input>
                            <span v-show="errors.has('identity')" class="error">{{ errors.first('identity') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <md-field>
                                <label for="email">email</label>
                                <md-input v-validate="'required'" type="email" name="email" id="email" v-model="email"></md-input>
                                <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
                        </md-field>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col md="6">
                        <md-field>
                            <label for="phone">teléfono</label>
                            <md-input v-validate="'required'" type="number" name="phone" id="phone" v-model="phone"></md-input>
                            <span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
                        </md-field>
                    </b-col>
                    <b-col md="6">
                        <button type="submit" class="send-button">Enviar</button>
                        <div id="output"></div>
                    </b-col>
                </b-row>
            </form>
        </div>

.vue

import { Validator } from 'vee-validate'
import axios from 'axios'

const dictionary = {
  custom: {
    name: {
      required: () => 'Por favor complete con su nombre.'
    },
    surname: {
      required: () => 'Por favor complete con su apellido.'
    },
    identity: {
      required: () => 'Por favor complete con su dni.'
    },
    email: {
      required: () => 'Por favor complete con su email.'
    },
    phone: {
      required: () => 'Por favor complete con su teléfono.'
    }
  }
}

Validator.localize('en', dictionary)

export default {
  name: 'contact-form',
  data: () => ({
    name: '',
    surname: '',
    identity: '',
    email: '',
    phone: ''
  }),
  methods: {
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        // const form = document.getElementById('form')
        const resultElement = document.getElementById('output')
        const formData = new FormData()

        formData.append('name', this.name)
        formData.append('surname', this.surname)
        formData.append('identity', this.identity)
        formData.append('email', this.email)
        formData.append('phone', this.phone)

        if (result) {
          // eslint-disable-next-line
          return axios.post('form/save-form.php', formData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((response) => {
              resultElement.innerHTML = 'El formulario se ha enviado correctamente'
              this.formData.reset()
            })
        }
        axios.catch((error) => {
          if (error.response) {
            console.log(error.response.data)
            console.log(error.response.status)
            console.log(error.response.headers)
            resultElement.innerHTML = 'Se produjo un error. Intente nuevamente.'
          }
        })
      })
    }
  }
}
4
  • Como estas haciendo el reset()
    – cignius
    Commented el 28 mar. 2018 a las 19:15
  • Fijate en el .then, está el this.formData.reset(). Commented el 28 mar. 2018 a las 19:17
  • Intenta con this.content = ' ';
    – cignius
    Commented el 28 mar. 2018 a las 19:23
  • Tu error esta en this.formData.reset() cuando en realidad debería de ser formData.reset() sin la instancia this Commented el 10 dic. 2019 a las 3:07

3 respuestas 3

2

Parece que estás haciendo un reset del formData que no es el formulario, solo es una variable creada para enviar los datos.

Para hacer el reset puedes usar el formulario.reset(), o limpiar los campos así:

// Reset form

this.name = '';
this.surname = '';
this.identity = '';
this.email = '';
this.phone = '';
1

Crea una copia del registro en blanco

this.ENBLANCO = JSON.parse(JSON.stringify(this.RECORD));

y luego , cuando quieras reseter el formulario , recuperala

this.RECORD = JSON.parse(JSON.stringify(this.ENBLANCO));

-1

Amigo en lugar de hacer eso redirecciona a la misma página o a otra si deseas. Entonces remplaza :

this.formData.reset()

this.$router.push('/turuta');
2
  • No quiero hacer eso. En otros casos tranquilamente he limpiado el contenido de los inputs con .reset(), no sé por qué en este caso no funciona. Commented el 28 mar. 2018 a las 19:22
  • prueba cerrando el punto y coma luego del mensaje que mandas y en el formData tambien: resultElement.innerHTML = 'El formulario se ha enviado correctamente'; this.formData.reset(); Commented el 28 mar. 2018 a las 19:38

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.