在Laravel中使用axios调用进行Vue自动完成

Question

我感觉我真的很接近在axios上实现Vue自动完成功能，但是我仍然缺少关键组件。

我已经使用硬编码的测试数据对此进行了测试，但是我需要弄清楚如何获取axios调用以正确查询我的控制器。当前在axios调用中设置的路由会在下面的控制器中触发该函数，但是我需要知道将$query变量设置为什么，以便它使用用户键入的实际值触发数据库调用。

如何正确地通过axios发送请求并将数据返回到axios中的this.options？

刀片：

<div id="tagApp">
  <multiselect
    v-model="value"
    :options="options"
    :loading="loading"
    :multiple="true"
    :taggable="true"
    @search-change="val => read(val)"
  ></multiselect>
</div>


new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#tagApp",
      data: {
        value: [],
        loading: false,
        options: [],

      },
      methods: {
        read: function(val){
            console.log('searched for', val);
          if (val) {
            this.loading = true;
            this.options = [];

            const self = this;

            axios.get('campaigns/search',{params: {query: this.val}})
                .then(function (response) {
                    self.options = response.data;
            });

          } else {
            this.options = [];
          }
        }
      }
    })

控制器：

public function searchTags(Request $request)
{

    $query = $request->get('query);

    $data = CampaignTags::where('TAG_DATA', 'LIKE', "%{$query}%")->get();

    return json_encode($data);


}