无法从vue.js ajax调用中检索发布的数据

时间:2016-03-11 03:51:57

标签: codeigniter vue.js

我正在尝试Vue.js,它比Angular简单得多,然后我坚持这个问题。我正在使用CodeIgniter进行后端处理。基本上我只想通过Vue.js使用ajax调用发送数据然后我想在mmy控制器中检索数据。但我无法使用$this->input->post()来检索数据。

这是我的看法。我在模态上使用表单。

<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">&times;</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 -->

这是我在vue上发送数据的方式 enter image description here 然后这是我的控制器

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');
}

我在控制台上检查时成功发送了数据

enter image description here

我认为控制器存在问题,但我不知道为什么。你能帮帮我吗?

1 个答案:

答案 0 :(得分:0)

您正试图从帖子回调中访问this,其中this指的是您的vue实例以外的其他内容。试试这种格式:

this.$http.post('url/to/post',{},function(){

    //because of "bind", 'this' is vue

}.bind(this));