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.'
}
})
})
}
}
}
reset()
.then
, está elthis.formData.reset()
.this.content = ' ';
this.formData.reset()
cuando en realidad debería de serformData.reset()
sin la instanciathis