title: Cannot retrieve posted data from vue.js ajax call
body: <p>I'm giving a try to Vue.js, It's much simpler than Angular and then I stuck on this problem. I'm using CodeIgniter for the backend process. Basically I just want to send data using ajax call via Vue.js then I want to retrieve the data in mmy controller. But I can't retrive the data using <code>$this-&gt;input-&gt;post()</code>.</p>
  
  <p>Here is my view. I'm using form on a modal.</p>
  
  <pre><code>&lt;div class="modal fade modal-primary" id="modalObat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Tambah Obat&lt;/h4&gt;
            &lt;/div&gt;
            &lt;form @submit.prevent="onSubmit" class="form-horizontal"&gt;
            &lt;div class="modal-body"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="nama-obat" class="col-sm-2 control-label"&gt;Nama Obat&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="namaObat" placeholder="nama obat" v-model="newObat.nama"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="harga" class="col-sm-2 control-label"&gt;Harga&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="number" class="form-control" id="harga" placeholder="harga" v-model="newObat.harga"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="Stok" class="col-sm-2 control-label"&gt;Stok&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="number" class="form-control" id="stok" placeholder="jumlah" v-model="newObat.stok"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-outline pull-left" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="submit" id="simpen" class="btn btn-outline"&gt;Save Changes&lt;/button&gt;
            &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>This is how I send the data on vue
  <a href="https://i.stack.imgur.com/Mkw68.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mkw68.png" alt="enter image description here"></a>
  Then here is my controller</p>
  
  <pre><code>public function tambahObat()
  {
      $data = array(
              'nama'  =&gt; $this-&gt;input-&gt;post('nama'),
              'harga' =&gt; $this-&gt;input-&gt;post('harga'),
              'stok'  =&gt; $this-&gt;input-&gt;post('stok')
          );
  
      $data1 = $this-&gt;input-&gt;post('newObat');
  
      $query = $this-&gt;obat_m-&gt;save($data, null);
  
      if( $query == true )
      {
          $message = $this-&gt;session-&gt;set_flashdata('message', 'berhasil menyimpan');
      }
      else
      {
          $message = $this-&gt;session-&gt;set_flashdata('message', 'berhasil mengupdate');
      }
  
      redirect('obat');
  }
  </code></pre>
  
  <p>I succeed to send the data as I check on the console</p>
  
  <p><a href="https://i.stack.imgur.com/9w2ZS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9w2ZS.png" alt="enter image description here"></a></p>
  
  <p>I think there is a problem with the controller but I dont know why. Could you help me, please??</p>