Vue Multiselect搭配Axios发起请求后端接收query参数为null问题排查

核心错误原因 #

你遇到的query参数为空问题，是因为axios请求中的参数取值逻辑错误，同时还有两处会影响功能正常运行的逻辑问题：

• 参数取值错误：val是searchCopiedUsers函数的传入参数，不属于Vue实例的属性，使用this.val取值会得到undefined，因此发送的query参数为空
• 响应赋值不匹配：模板中绑定的下拉选项属性是copyUsersOptions，但你在请求回调中将返回值赋值给了不存在的self.options，会导致搜索成功后也看不到可选内容
• 加载状态未重置：请求发起后将loading设为true，但请求完成后没有重置为false，组件会一直显示加载状态

修复后的JS代码 #

loading:false,
copyUsers: [],
copyUsersOptions: [],
searchCopiedUsers: function(val) {
      console.log('searched for', val);
      if (val) {
        this.loading = true;
        this.copyUsersOptions = [];
        // 直接使用入参val，不用加this
        axios.get('users/search',{params: {query: val}})
            .then(response => {
                // 赋值给正确的选项属性
                this.copyUsersOptions = response.data;
            })
            .catch(err => {
                console.error('搜索请求失败：', err)
            })
            .finally(() => {
                // 重置加载状态
                this.loading = false;
            })
      } else {
        this.copyUsersOptions = [];
      }
},

后端验证 #

如果路由配置正确，users/search请求确实绑定到getUsers方法，此时dd($request->get('query'))即可正常打印出前端传入的搜索关键词。

内容的提问来源于stack exchange，提问作者Geoff_S