title: Submit a form using POST request in VueJS
body: <p>I have an endpoint to submit data using POST request,</p>
  
  <pre><code>http://localhost:3000/entry
  </code></pre>
  
  <p>Keys are <code>fname, lname, age</code></p>
  
  <p>I can make a POST request into the given end point and it will create an entry. </p>
  
  <p>I am trying to submit a form using VueJS. But, when I am calling the API within the form, it is not submitting the data. I have checked the network calls and it is not sending any data to the end point. </p>
  
  <p>HTML :- </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  
  &lt;div id="vueApp"&gt;
    &lt;div class="container"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;h3&gt;
            Dashboard
          &lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="fname"&gt;First Name&lt;/label&gt;
            &lt;input type="text" class="form-control" value="" v-model="fname" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="lname"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" class="form-control" value="" v-model="lname" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="age"&gt;Age&lt;/label&gt;
            &lt;input type="text" class="form-control" value="" v-model="age" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;a href="#" class="btn btn-success" @click="submitEntry"&gt;Submit&lt;/a&gt;
          &lt;span v-if="ajaxRequest"&gt;Please Wait ...&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  
      &lt;div&gt;&amp;nbsp;&lt;/div&gt;
  
      &lt;div class="row" v-if="debug"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;pre&gt;{{ $data | json }}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Table Start --&gt;
  
      &lt;div class="row"&gt;
        &lt;table style="width:100%"&gt;
          &lt;tr&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Age&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;{{fname}}&lt;/td&gt;
            &lt;td&gt;{{lname}}&lt;/td&gt;
            &lt;td&gt;{{age}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;!-- Table END --&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script.js :- </p>
  
  <pre><code>Vue.http.options.emulateJSON = true;
  
  new Vue({
      el: '#vueApp',
      data: {
          debug: true,
          fname: '',
          lname: '',
          age: '',
          ajaxRequest: false,
          postResults: []
      },
      methods: {
        submitEntry: function() {
          this.ajaxRequest = true;
          this.$http.post('http://localhost:3000/entry', {
                fname: this.fname,
                lname: this.lname,
                age: this.age
              }, function (data, status, request) {
                  this.postResults = data;
  
                  this.ajaxRequest = false;
              });
        }}
  });
  </code></pre>
  
  <p>style.css :- </p>
  
  <pre><code>table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
  }
  th, td {
      padding: 5px;
      text-align: left;    
  }
  </code></pre>