[Vuejs]-Stop PHP code executing after it's ran vue form

by

0👍

Prevent the default action with and send the data to PHP from the onSubmit method

<form @submit.prevent.stop="onSubmit" ref="ticketForm">

UPDATES

Initialise the variables required for binding your inputs

data:()=>{
  return {
    formData:{
      name:null,
      // your other models
    }
  }
}

Use v-model to bind the input fields with data

<form @submit.prevent.stop="onSubmit" ref="ticketForm">
  <input type="text" v-model="formData.name"> // this will bind the typing value to formData.name
</form>

Use axios to send the data to your PHP file from the method onSubmit

onSubmit: async function(){
  this.showMsg = true;
  await axios.post("/backend/contact.php",this.formData);
  setTimeout(() => {
    this.showMsg = false;
  }, 3000);
}

The async and await keywords are optional. You can remove if not required.

Leave a comment