时间戳

首页 > 解决方案 > Vue多选并通过axios调用发送查询

php - Vue多选并通过axios调用发送查询

问题描述

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

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

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

这是代码：

    <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 = [];
      }
},

控制器.php

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

标签： phplaravelvue.js

解决方案

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

推荐阅读