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

Question

我正在尝试 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 上发送数据的方式 然后这是我的控制器

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

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

我认为控制器有问题，但我不知道为什么。请帮帮我好吗？

Answer 1

您正试图从 post 回调内部访问 this，其中 this 指的是您的 vue 实例以外的东西。试试这个格式：

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

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

}.bind(this));