vue js insert data into database using PHP. PHP Vuejs insert data.

In this example we will show you how to insert data into Mysql using VueJs with PHP. We will submit form with the help of vuejs and insert data into Mysql with PHP api. Below are the steps to implement this , you need to simply follow below steps.

Step 1 : Create HTML File And Add Below Code.

<html lang="en">
<head>
 <title>Insert Data Into Mysql Using VueJs With PHP</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
</head>
<body>
<div class="container" id="app">
    <div class="container">
         <h4 class="text-success">Insert Data Into Mysql Using VueJs With PHP</h4>
          <div class="panel panel-primary">
            <div class="panel-heading">Insert Data Into Mysql Using VueJs With PHP</div>
        <form class="form-horizontal">
            <div class="panel-body">

                <div class="form-group">
                  <label class="control-label col-sm-2">First name:</label>
                  <div class="col-sm-5">
                     <input class="form-control" type="text" name="name" v-model="name" >
                  </div>
               </div>
                <div class="form-group">
                  <label class="control-label col-sm-2">Email:</label>
                  <div class="col-sm-5">
                     <input class="form-control" type="email" name="email" v-model="email">
                  </div>
               </div>

                <div class="form-group">
                  <label class="control-label col-sm-2">Mobno:</label>
                  <div class="col-sm-5">
                     <input class="form-control" type="email" name="phone" v-model="phone">
                  </div>
               </div>

                <div class="form-group">
                  <label class="control-label col-sm-2">  </label>
                  <div class="col-sm-5">
                     <button  @click='submitForm();' class="btn btn-primary" name="submit"  type="button">Submit</button>
                  </div>
               </div>      

           </div>      

  </form>
  </div> 
   </div>  
 </div>

#mysql #php #vuejs

phpforever.com

vue js insert data into database using PHP. PHP Vuejs insert data.