Vue多选并通过axios调用发送查询答案

【问题标题】：Vue multiselect and sending a query via axios callVue多选并通过axios调用发送查询
【发布时间】：2021-10-05 11:13:24
【问题描述】：

我正在尝试使用 Vue-multiselect 作为对数据库的自动完成搜索，但在检索我从 axios 调用发送的查询时遇到了问题。

我看到我在函数中输入为“val”的值，但是当我从控制器中的请求中转储查询时，它显示为 null（查看请求，查询参数似乎是空的）。我在想我的发送方式可能有问题。

就我发送查询的方式而言，我的函数是否不正确？

代码如下：

    <div class="form-group col-lg-4">
<h4>Copy Users</h4>
<br>
<multiselect 
    v-model="copyUsers" 
    :options="copyUsersOptions" 
    @search-change="val => searchCopiedUsers(val)"
    :multiple="true" 
    :loading="loading"
    placeholder="Enter user(s) to be copied" 
    label="name"
    track-by="value">
</multiselect>
</div>


loading:false,
copyUsers: [],
copyUsersOptions: [],
searchCopiedUsers: function(val) {
      console.log('searched for', val);
      if (val) {
        this.loading = true;
        this.copyUsersOptions = [];

        let self = this;

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

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

controller.php

public function getUsers(Request $request)
{
    dd($request->get('query'));
}

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

您正在发送数据对象 this.val，这是您的 vue 应用程序在其本地数据存储中存储为 val 的内容。您是否尝试过像这样将值直接传递到 get 请求中：axios.get('users/search',{params: {query: val}})？

【讨论】：