Cannot retrieve posted data from vue.js ajax call - codeigniter

Question

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 $this->input->post().
Here is my view. I'm using form on a modal.
<div class="modal fade modal-primary" id="modalObat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Tambah Obat</h4>
</div>
<form #submit.prevent="onSubmit" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="nama-obat" class="col-sm-2 control-label">Nama Obat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="namaObat" placeholder="nama obat" v-model="newObat.nama">
</div>
</div>
<div class="form-group">
<label for="harga" class="col-sm-2 control-label">Harga</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="harga" placeholder="harga" v-model="newObat.harga">
</div>
</div>
<div class="form-group">
<label for="Stok" class="col-sm-2 control-label">Stok</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="stok" placeholder="jumlah" v-model="newObat.stok">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
<button type="submit" id="simpen" class="btn btn-outline">Save Changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is how I send the data on vue
Then here is my controller
public function tambahObat()
{
$data = array(
'nama' => $this->input->post('nama'),
'harga' => $this->input->post('harga'),
'stok' => $this->input->post('stok')
);
$data1 = $this->input->post('newObat');
$query = $this->obat_m->save($data, null);
if( $query == true )
{
$message = $this->session->set_flashdata('message', 'berhasil menyimpan');
}
else
{
$message = $this->session->set_flashdata('message', 'berhasil mengupdate');
}
redirect('obat');
}
I succeed to send the data as I check on the console
I think there is a problem with the controller but I dont know why. Could you help me, please??

Answer 1

You are trying to access this from inside the post callback, where this refers to something other than your vue instance. Try this format:
this.$http.post('url/to/post',{},function(){
//because of "bind", 'this' is vue
}.bind(this));